Click here to Skip to main content
15,867,453 members
Articles / Programming Languages / Javascript

Stunning popup window control using jQuery

Rate me:
Please Sign up or sign in to vote.
4.90/5 (14 votes)
11 Jun 2012CPOL2 min read 220.4K   8.5K   29   65
A very easy to use jQuery popup window control for websites.

Introduction

Today I am going to demonstrate a stunning popup window control  for web developers. I thought there were plenty of such controls available on the internet but still I need to create my own as I need to develop such controls with little efforts.

Background

This popup control is extremely easy to implement, all you need to do is include the jQuery libraries (1, 2, 3 )and our jQuery Popup library file braviPopUp.js at the top of your HTML page, as well as a small amount of jQuery code.   

This Popup control is a floating window that contains a title bar and a content area for the popup page to be shown in the dialog. The dialog window can be moved, resized and closed with the 'x' icon by default.

If the content length exceeds the maximum height, a scrollbar will automatically appear.You can set width and height of the control. There is a limit for minimum width and height. 

braviPopUp method defined in the braviPopUp.js takes four perameters

  • title of the page
  • source URL  
  • width 
  • height   
To show the popup page content there is a Iframe inside the floating div that is used to show the popup control. This div is appended in the Body of the page with some css settings so that it can be centered.

Using the code 

Method defined in the braviPopUp.js is named braviPopUp and it takes four arguments title, url, width, height. I created raw html containg the main div with the title bar, close button, content area iFrame. When call the  braviPopUp  method it will append this html into page body with some css setting to center the control in the web page.

the jQuery code: 

JavaScript
(function ($) {
    $.braviPopUp = function (title, src, width, height) {
        //Destroy if exist
        $('#dv_move').remove();
        //create hte popup html
        var html = '<div class="main" id="dv_move" style="width:' + width + 'px; height:' + height + 'px;">';
        html += '  <div class="title">';
        html += '    <span id="title_left">' + title + '</span> <span class="close">';
        html += ' <img id="img_close" src="images/close.png" width="25" height="23" onclick="CloseDialog();"></span></div>';
        html += ' <div id="dv_no_move">';
        html += '<div id="dv_load"><img src="images/circular.gif"/></div>';
        html += ' <iframe id="url" scrolling="auto" src="' + src + '"  style="border:none;" width="100%" height="100%"></iframe>';
        html += ' </div>';
        html += ' </div>';

        //add to body
   $('<div></div>').prependTo('body').attr('id', 'overlay');// add overlay div to disable the parent page
        $('body').append(html);
        //enable dragable
        $('#dv_move').draggable();
        //enable resizeable
        $("#dv_move").resizable({
            minWidth: 300,
            minHeight: 100,
            maxHeight: 768,
            maxWidth: 1024
        });

        $("#dv_no_move").mousedown(function () {
            return false;
        });
        $("#title_left").mousedown(function () {
            return false;
        });
        $("#img_close").mousedown(function () {
            return false;
        });
        //change close icon image on hover
        $("#img_close").mouseover(function () {
            $(this).attr("src", 'images/close2.png');
        });
        $("#img_close").mouseout(function () {
            $(this).attr("src", 'images/close.png');
        });

        setTimeout("$('#dv_load').hide();", 1500);
    };
})(jQuery); 

Disable background

When the popup window is open it will be a good practice to disable the parent page so that no any action can be perform there. I added a overlay div with transparent background that will be covered the whole page.  We have css for this   

JavaScript
$('<div></div>').prependTo('body').attr('id', 'overlay'); 

Control's close method

To call the close method from the poup page use parent.CloseDialog(); 

JavaScript
//close popup
function CloseDialog() {
    $('#overlay').fadeOut('slow');
    $('#dv_move').fadeOut('slow');
    setTimeout("$('#dv_move').remove();", 1000);

    //call Refresh(); if we need to reload the parent page on its closing
   // parent.Refresh();

Here I am removing the HTML so that it will be completely destroy.

After all magic of appending the control to page body css is very important part of this control. positions and looks of all div<code>, span are managed by css. Also  there are few images like the title bar image, close button icon etc

CSS: 

CSS
#overlay
{
    position: fixed;
    height: 100%;
    width: 100%; 
    background-color: #fffddd;
    opacity: 0.4;
}

.main
{
    position: absolute;
    top: 25%;
    left: 30%;
    margin-left: -70px;
    background: url(../images/title.png) no-repeat;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border: 3px solid gray;
    padding: 0;
    border: 1px dashed silver;
    background-color: #aacc74;
}
#dv_no_move
{
    padding: 2px -40px -50px 2px;
    height: 90%;
    width: 100%;
}
.close
{
    float: right;
    cursor: pointer;
    margin-top: 3px;
}
.close:hover
{
    margin-top: 5px;
}
.title
{
    cursor: move;
    width: 98%;
    height: 20px;
    font-size: 14;
    font-weight: 900;
    color: #fff;
}
#title_left
{
    padding: 4px 0 3px 9px;
    float: left;
    cursor: default;
}

#dv_load
{
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin: 0 auto;
}
Usage:

Using jQuery ready method I register the button click event and call the popup window.

HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />
    <script src="jquery/braviPopup.js" type="text/javascript"></script>
    <link href="css/braviStyle.css" rel="stylesheet" type="text/css" />
    <title>braviPopUp</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnTest').click(function () {
                $.braviPopUp('testing title!', 'popup.aspx', 600, 400);
            });
        });  
 //if you want to refresh parent page on closing of a popup window then remove comment to the below function
        //and also call this function from the js file 
        //        function Refresh() {
        //            window.location.reload();
        //        }     
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" id="btnTest" value="Click Me!" />
    </form>
</body>
</html> 

Screenshot 

Image 1

History 

This is an idea from my early post jQuery alert control. Now it has become a popup window control. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer LIFELONG Pakistan, Islamabad
Pakistan Pakistan
Software Engineer at LIFELONG Pakistan,

http://tanweerbravi.blogspot.com

Comments and Discussions

 
QuestionWhen click on menu items in the left side of one page, shows a popup window in the another page at the centre. Pin
Member 1102118927-May-15 0:57
Member 1102118927-May-15 0:57 
QuestionInteresting Pin
Yves5-Dec-13 5:46
Yves5-Dec-13 5:46 
AnswerRe: Interesting Pin
tanweer8-Dec-13 18:24
tanweer8-Dec-13 18:24 
GeneralMy vote of 3 Pin
Singh Vijay Kumar18-Nov-13 23:51
professionalSingh Vijay Kumar18-Nov-13 23:51 
GeneralRe: My vote of 3 Pin
tanweer19-Nov-13 17:38
tanweer19-Nov-13 17:38 
GeneralRe: My vote of 3 Pin
Singh Vijay Kumar19-Nov-13 19:30
professionalSingh Vijay Kumar19-Nov-13 19:30 
GeneralRe: My vote of 3 Pin
tanweer19-Nov-13 21:05
tanweer19-Nov-13 21:05 
GeneralRe: My vote of 3 Pin
Singh Vijay Kumar20-Nov-13 21:52
professionalSingh Vijay Kumar20-Nov-13 21:52 
GeneralRe: My vote of 3 Pin
iqbalu22-Nov-13 7:02
iqbalu22-Nov-13 7:02 
GeneralRe: My vote of 3 Pin
Dewey28-Apr-15 21:37
Dewey28-Apr-15 21:37 
GeneralMy vote of 5 Pin
linuxjr6-Oct-13 4:34
professionallinuxjr6-Oct-13 4:34 
GeneralRe: My vote of 5 Pin
tanweer6-Oct-13 18:26
tanweer6-Oct-13 18:26 
GeneralMy vote of 5 Pin
Renju Vinod2-Oct-13 20:49
professionalRenju Vinod2-Oct-13 20:49 
GeneralRe: My vote of 5 Pin
tanweer2-Oct-13 21:05
tanweer2-Oct-13 21:05 
QuestionTop 10+ newest jQuery popup window plugins Pin
Talking Dotnet10-Aug-13 0:00
Talking Dotnet10-Aug-13 0:00 
QuestionHow to Close this popup after the button click event in aspx page. Pin
priyakanwar19-Feb-13 1:14
priyakanwar19-Feb-13 1:14 
AnswerRe: How to Close this popup after the button click event in aspx page. Pin
tanweer20-Feb-13 17:36
tanweer20-Feb-13 17:36 
QuestionError while running the Code Pin
ankurgur1217-Jan-13 10:53
ankurgur1217-Jan-13 10:53 
AnswerRe: Error while running the Code Pin
tanweer18-Jan-13 5:24
tanweer18-Jan-13 5:24 
QuestionProblem in using MVC with jquery mobile archtecture Pin
kumar_phogat858-Nov-12 21:09
kumar_phogat858-Nov-12 21:09 
AnswerRe: Problem in using MVC with jquery mobile archtecture Pin
tanweer12-Nov-12 1:24
tanweer12-Nov-12 1:24 
Hi kumar, I could not test it with exact issue facing you as i don't have the same environment here but normally in a web page we face similar issue and we are doing some css techniques to bring an object in-front of all others like:
CSS
z-index: 20;
try adding this to our .main class
QuestionError using the pop up control. Pin
RAMADURAI P18-Oct-12 21:27
RAMADURAI P18-Oct-12 21:27 
AnswerRe: Error using the pop up control. Pin
tanweer31-Oct-12 20:44
tanweer31-Oct-12 20:44 
QuestionHow to access this modal pop up control in server side control (aspx buttons/link buttons) Pin
Issac_developer4-Oct-12 1:59
Issac_developer4-Oct-12 1:59 
AnswerRe: How to access this modal pop up control in server side control (aspx buttons/link buttons) Pin
tanweer4-Oct-12 2:15
tanweer4-Oct-12 2:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.