How To Create Popup Using Jquery

Updated date Apr 30, 2020

This is the article explains the custom PopUp window in jQuery, without any plug-ins. Most of the time we willing to open a <div> on a click event.

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:

$( "#div" ).click( function () {
alert("click " );
});

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

$(document).ready( function () {
$('#myButton' ).click( function () {
var id = '#dialog' ;
var clgName = $( '#cllg' ).val();
$("#clg" ).val(clgName);
var maskHeight = $(document).height();
var maskWidth = $(document).width();
$('#mask' ).css({ 'width' : maskWidth, 'height' : maskHeight })
$('#mask' ).fadeIn(1000);
$('#mask' ).fadeTo( "slow" , 0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top' , winH / 2 - $(id).height() / 2);
$(id).css('left' , winW / 2 - $(id).width() / 2);
$(id).fadeIn(2000);
$('.window .close' ).click( function (e) {
e.preventDefault();
$('#mask' ).hide();
$('.window' ).hide();
});
});
});

This JavaScript code works in the following 3 steps:

Getting the size of the window for the fade effect
Set the pop-up window
Close the pop-up window

CSS Code

#mask {
position : absolute ;
padding-left : 60px ;
padding-top : 80px ;
padding-bottom : 80px ;
padding-right : 50px ;
left:0 ;
top:0 ;
z-index : 9999 ;
background-color : #808080 ;
display : none ;
}
#boxes .window {
position : absolute ;
left:0 ;
top:0 ;
width : 580px ;
height : 300px ;
display : none ;
z-index : 9999 ;
padding : 20px ;
background-color : white ;
border : 3px solid #79BBFD ;
border-radius:10px ;
-webkit-border-radius:10px ;
-moz-border-radius:10px ;
}
#boxes #dialog {
padding : 10px ;
width : 580px ;
height : 300px ;
background-color : #ffffff ;
background-repeat : no-repeat ;
margin-top : 20px ;
}
#header Border{
height : 25px ;
width : 100% ;
background-color : #0026ff ;
color : white ;
font-size : 18px ;
padding-top : 3px ;
margin-bottom : 20px ;
}
#close {
position : relative ;
float : right ;
text-decoration : none ;
padding-right : 5px ;
cursor : pointer ;
}

In this CSS code, we are able to design a perfect dialog box and a background color.

HTML Code

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.