simple jquery popup example code

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 :&nbsp; </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("");     }); });