Simple jquery popup which generally use to show or to
perform some operations as supplementary operations.
You will get the popup as like below.
This popup doesn’t need any plugin, you only need to take
the reference of the
HTML Code
All the Cyan
color is mainly for Jquery popup code.
When you are clicking to the Age click here it will open the popup near
to the link and to make position of the JQuery popup you need to change into
CSS.
<div class="form-group">
<span class="text-required">*</span><label for="Name">Date Of Birth
or (<a href="javascript:void(0);" id="contact">Age
click here </a></label> )
<div class="messagepop pop">
<div class="panel panel-info">
<div class="panel-heading">
Enter Age <a class="close" href="/"><span class="glyphicon glyphicon-remove"></span></a>
</div>
<div class="panel-body" style="width:100%">
<div class="alert alert-warning" role="alert">Valid
age from 1-99. It takes default month and day.</div>
<div class="col-md-4">Age : </div><div class="col-md-5">
<input type="number" style="width:100px" maxlength="2" max="=100" name="Age" id="Age" />
</div>
<div class="col-md-3">
<a class="btn btn-info btn-xs " id="SubmitAge" href="javascript:void(0)">
<span class="glyphicon glyphicon-floppy-save"></span>
</a>
</div>
</div>
</div>
</div>
@Html.TextBoxFor(model
=> model.DateOfBirth, new { @class = "form-control", placeholder = "Date Of
Birth", @maxlength = 100 })
@Html.ValidationMessageFor(model
=> model.DateOfBirth, "", new { @class = "text-error" })
</div>
|
CSS code
You can change the position of popup from the margin-top
positions.
<style>
a.selected {
background-color: #1F75CC;
color: white;
z-index: 100;
}
.messagepop {
background-color: #FFFFFF;
border: none;
cursor: default;
display: none;
margin-top: 5px;
position: absolute;
text-align: left;
width: 300px;
z-index: 50;
}
</style>
|
Jquery Code
It is performing the operation to get the date of birth by
giving the age in Jquery. It’s just generic way to get the default date of
birth. Jquery code for Date of birth by age.
//// Jquery Popup
div
function deselect(e) {
$('.pop').slideFadeToggle(function () {
e.removeClass('selected');
});
}
$(function () {
$('.close').on('click', function () {
deselect($('#contact'));
return false;
});
$('#contact').on('click', function () {
if ($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('#SubmitAge').on('click', function () {
debugger;
var age = $('#Age').val();
if (age != null && age != "" && age.length <= 2) {
if ($.isNumeric(age)) {
var today = new Date();
var currentYear =
parseInt(today.getFullYear());
var YearofBirth =
parseInt(today.getFullYear()) - parseInt(age);
$('#DateOfBirth').val("01-01-" + YearofBirth);
deselect($('#contact'));
return false;
$('#Age').val("");
}
else {
alert("Please enter
Age!!");
}
}
else {
alert("Please enter valid Age
!!");
}
$('#Age').val("");
});
});
|
No comments:
Post a Comment