Post
Ask Question

Custom Pop-Up Window Using jQuery

Introduction

 
This article explains the use of a custom PopUp window in jQuery, without any plug-ins. Most of the time we are willing to open a <div> on a click event. This article explains how to make a PopUp window and how to use it. For this (PopUp ) window we need to understand some jQuery functions and CSS. The output will something like this: 
 
output2
 
List of all jQuery functions for the PopUp window.
  • click
  • fadeIn/fadeOut
  • preventDefault
  • hide

click

 
This is the JavaScript event that can trigger on an element. For the use point of view, we use this function on any id, with "dot" and then function name. This function doesn't accept any arguments. I have used this function on a button. Example of click function:
  1. $("#div").click(function () {    
  2.     alert("click ");    
  3. });   

fadeIn/fadeOut 

 
The .fadeIn()/.fadeOut() methods are used to animate the opacity of the matched elements. For this (PopUp window) I have shown animation with some transaction. 
 
Syntax-  .fadeIn([duration][,easing][,complete])
               .fadeOut([duration][,easing][,complete])
  • duration: A number or string value that will determine how long the animation will run.
  • easing:  A string indicating which easing function to use for the transaction
  • complete: This is a function type and it calls the function when the animation is complete.     

preventDefault

 
This method helps to prevent all the actions from being revoked, if this method is called, the default action will not be triggered. I have used this method to rollback the animation when we open the PopUp window.  
 

hide

 
This method helps to hide immediately, with no animation. And make the display none of that element. I have used this method to close the window.
 
JavaScript code and explanation
  1. $(document).ready(function () {    
  2.     $('#myButton').click(function () {    
  3.         var id = '#dialog';    
  4.         var clgName = $('#cllg').val();    
  5.         $("#clg").val(clgName);    
  6.        var maskHeight = $(document).height();    
  7.         var maskWidth = $(document).width();    
  8.         $('#mask').css({ 'width': maskWidth, 'height': maskHeight })    
  9.         $('#mask').fadeIn(1000);    
  10.         $('#mask').fadeTo("slow", 0.8);    
  11.         var winH = $(window).height();    
  12.         var winW = $(window).width();    
  13.         $(id).css('top', winH / 2 - $(id).height() / 2);    
  14.         $(id).css('left', winW / 2 - $(id).width() / 2);    
  15.         $(id).fadeIn(2000);    
  16.         $('.window .close').click(function (e) {    
  17.             e.preventDefault();    
  18.             $('#mask').hide();    
  19.             $('.window').hide();    
  20.         });    
  21.     });    
  22. });   
This JavaScript code works in the following 3 steps:
  1. Getting the size of the window for the fade effect
  2. Set the pop-up window
  3. Close the pop-up window
CSS Code 
  1. #mask {      
  2.            position: absolute;      
  3.            padding-left: 60px;      
  4.            padding-top: 80px;      
  5.            padding-bottom: 80px;      
  6.            padding-right: 50px;       
  7.            left: 0;      
  8.            top: 0;      
  9.            z-index: 9999;      
  10.            background-color: #808080;      
  11.            display: none;      
  12.        }      
  13.      
  14.        #boxes .window {      
  15.            position: absolute;      
  16.            left: 0;      
  17.            top: 0;      
  18.            width: 580px;      
  19.            height: 300px;      
  20.            display: none;      
  21.            z-index: 9999;      
  22.            padding: 20px;      
  23.            background-color: white;      
  24.            border: 3px solid #79BBFD;      
  25.            border-radius: 10px;      
  26.            -webkit-border-radius: 10px;      
  27.            -moz-border-radius: 10px;      
  28.        }      
  29.      
  30.        #boxes #dialog {      
  31.            padding: 10px;      
  32.            width: 580px;      
  33.            height: 300px;      
  34.            background-color: #ffffff;      
  35.            background-repeat: no-repeat;      
  36.            margin-top: 20px;      
  37.        }      
  38.        #headerBorder{      
  39.            height:25px;       
  40.            width:100%;       
  41.            background-color:#0026ff;      
  42.             color:white;       
  43.             font-size:18px;       
  44.             padding-top:3px;      
  45.              margin-bottom:20px;      
  46.        }      
  47.        #close{      
  48.            position:relative;      
  49.            float:right;      
  50.            text-decoration:none;      
  51.            padding-right:5px;       
  52.            cursor:pointer;      
  53.        }     
In this CSS code, we are able to design a perfect dialog box and a background color. 
 
HTML Code
  1.     <html>    
  2.     <head>    
  3.         <title>PopUp</title>    
  4.         <script src="Scripts/jquery-2.1.1.js"></script>    
  5.         <link href="PopUp.css" rel="stylesheet" />    
  6.         <script src="PopUpJquery.js"></script>    
  7.         <style type="text/css">    
  8.             .auto-style1 {    
  9.                 width: auto;    
  10.                 position:relative;    
  11.                 left:45px;    
  12.                 width:100%;    
  13.             }    
  14.         </style>    
  15.          
  16.        </head>    
  17.     <body>    
  18.         Enter the name of the college <input type="text" size="12" id="cllg" />    
  19.         <Button ID="myButton"   onclick="myButton_Click()">Click Here</Button>    
  20.         <div id="boxes">    
  21.             <div id="mask">    
  22.                 <div id="dialog" class="window">    
  23.                     <div id="headerBorder">    College Records    
  24.                     <div id="close" class="close">[X]</div>    
  25.                     </div>    
  26.                     <table cellpadding="2" class="auto-style1">    
  27.                         <tr>    
  28.                             <td>College Name</td>    
  29.                             <td>    
  30.                                 <input type="text" size="12" id="clg" />    
  31.                             </td>    
  32.                         </tr>    
  33.                         <tr>    
  34.                             <td>College Address</td>    
  35.                             <td>    
  36.                                 <input type="text" size="12" />    
  37.                             </td>    
  38.                         </tr>    
  39.                         <tr>    
  40.                             <td>College Location</td>    
  41.                             <td>    
  42.                                 <select>    
  43.                                     <option>Select Here</option>    
  44.                                     <option>New Delhi</option>    
  45.                                     <option>Pune</option>    
  46.                                     <option>Banglore</option>    
  47.                                     <option>Chennai</option>    
  48.                                     <option>Kolkatta</option>    
  49.                                     <option>Odisa</option>    
  50.          
  51.                                     </select>    
  52.     </td>    
  53.                         </tr>    
  54.                         <tr>    
  55.                             <td>Choose your University</td>    
  56.                             <td>    
  57.                                 <select>    
  58.                                     <option>Select Here</option>    
  59.                                     <option>Acharya Nagarjuna University</option>    
  60.                                     <option>Adikavi Nannaya University</option>    
  61.                                     <option>Andhra University</option>    
  62.                                     <option>Jawaharlal Nehru Technological University</option>    
  63.                                     <option>Magadh University</option>    
  64.                                     <option>Patana University</option>    
  65.                                     <option>Aligarh Muslim University</option>    
  66.                                     <option>Jamia Millia Islamia</option>    
  67.                                     <option>University of Delhi</option>    
  68.                                     <option>University of Pune</option>    
  69.                                     </select>    
  70.     </td>    
  71.                         </tr>    
  72.                         <tr>    
  73.                             <td>Contact No.</td>    
  74.                             <td>    
  75.                                 <input type="text" size="12"/>    
  76.                             </td>    
  77.                         </tr>    
  78.                         <tr>    
  79.                             <td>Address</td>    
  80.                             <td>    
  81.                                 <input type="text" size="12" />    
  82.                             </td>    
  83.                         </tr>    
  84.                         <tr>    
  85.                             <td>Status</td>    
  86.                             <td>    
  87.                                 <select>    
  88.                                     <option>Select Here</option>    
  89.                                     <option>Reguralar</option>    
  90.                                     <option>Corospaondance</option>    
  91.                                     <option>--</option>    
  92.                                         
  93.                                 </select>    
  94.                             </td>    
  95.                         </tr>    
  96.                             
  97.                         <tr>    
  98.                                 
  99.                             <td> <input type="reset" /></td>    
  100.                             <td>    
  101.                                 <button OnClick="Button1_Click"  >Submit</button>    
  102.                             </td>    
  103.                         </tr>    
  104.                     </table>    
  105.                 </div>    
  106.             </div>    
  107.         </div>    
  108.     </body>    
  109.     </html>     
Output
 
output1
 
When we enter the name of the college and hit the button, we will see that college name on the PopUp window.
 
output2
 
We can close this window either by the cross [X] button or by closing the window. 
 

Summary

 
In this article, we are learned a custom pop-up window using JavaScript and CSS. In this article, we will also learn how to get and set the text value from the text box using jQuery. Thanks for reading this article. 


Similar Articles