Click here to Skip to main content
11,715,491 members (75,517 online)
Click here to Skip to main content

Stunning popup window control using jQuery

, 11 Jun 2012 CPOL 138.2K 7.8K 29
Rate this:
Please Sign up or sign in to vote.
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: 

(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   

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

Control's close method

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

//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, span are managed by css. Also  there are few images like the title bar image, close button icon etc

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.

<%@ 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 

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)

Share

About the Author

tanweer
Software Developer LIFELONG Pakistan, Islamabad
Pakistan Pakistan
Software Engineer at LIFELONG Pakistan,

http://tanweerbravi.blogspot.com

You may also be interested in...

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
memberMember 1102118927-May-15 0:57 
QuestionInteresting Pin
Yves5-Dec-13 5:46
memberYves5-Dec-13 5:46 
AnswerRe: Interesting Pin
tanweer8-Dec-13 18:24
membertanweer8-Dec-13 18:24 
GeneralMy vote of 3 Pin
vijayksingh18-Nov-13 23:51
professionalvijayksingh18-Nov-13 23:51 
GeneralRe: My vote of 3 Pin
tanweer19-Nov-13 17:38
membertanweer19-Nov-13 17:38 
GeneralRe: My vote of 3 Pin
vijayksingh19-Nov-13 19:30
professionalvijayksingh19-Nov-13 19:30 
GeneralRe: My vote of 3 Pin
tanweer19-Nov-13 21:05
membertanweer19-Nov-13 21:05 
GeneralRe: My vote of 3 Pin
vijayksingh20-Nov-13 21:52
professionalvijayksingh20-Nov-13 21:52 
GeneralRe: My vote of 3 Pin
iqbalu22-Nov-13 7:02
memberiqbalu22-Nov-13 7:02 
GeneralRe: My vote of 3 Pin
Dewey28-Apr-15 21:37
memberDewey28-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
membertanweer6-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
membertanweer2-Oct-13 21:05 
QuestionTop 10+ newest jQuery popup window plugins Pin
jQuery By Example10-Aug-13 0:00
memberjQuery By Example10-Aug-13 0:00 
QuestionHow to Close this popup after the button click event in aspx page. Pin
priyakanwar19-Feb-13 1:14
memberpriyakanwar19-Feb-13 1:14 
AnswerRe: How to Close this popup after the button click event in aspx page. Pin
tanweer akhtar20-Feb-13 17:36
membertanweer akhtar20-Feb-13 17:36 
QuestionError while running the Code Pin
ankurgur1217-Jan-13 10:53
memberankurgur1217-Jan-13 10:53 
AnswerRe: Error while running the Code Pin
tanweer akhtar18-Jan-13 5:24
membertanweer akhtar18-Jan-13 5:24 
QuestionProblem in using MVC with jquery mobile archtecture Pin
kumar_phogat858-Nov-12 21:09
memberkumar_phogat858-Nov-12 21:09 
AnswerRe: Problem in using MVC with jquery mobile archtecture Pin
tanweer akhtar12-Nov-12 1:24
membertanweer akhtar12-Nov-12 1:24 
QuestionError using the pop up control. Pin
RAMADURAI P18-Oct-12 21:27
memberRAMADURAI P18-Oct-12 21:27 
AnswerRe: Error using the pop up control. Pin
tanweer akhtar31-Oct-12 20:44
membertanweer akhtar31-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
memberIssac_developer4-Oct-12 1:59 
AnswerRe: How to access this modal pop up control in server side control (aspx buttons/link buttons) Pin
tanweer akhtar4-Oct-12 2:15
membertanweer akhtar4-Oct-12 2:15 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150901.1 | Last Updated 12 Jun 2012
Article Copyright 2012 by tanweer
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid