JavaScript

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 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 elements. 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 with 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>   

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. 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs