Click here to Skip to main content
11,412,834 members (75,448 online)
Click here to Skip to main content

Stunning popup window control using jQuery

, 11 Jun 2012 CPOL
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
Follow on   Google+

Comments and Discussions

 
QuestionInteresting Pin
Yves at 5-Dec-13 6:46
memberYves5-Dec-13 6:46 
AnswerRe: Interesting Pin
tanweer at 8-Dec-13 19:24
membertanweer8-Dec-13 19:24 
GeneralMy vote of 3 Pin
vijayksingh at 19-Nov-13 0:51
professionalvijayksingh19-Nov-13 0:51 
GeneralRe: My vote of 3 Pin
tanweer at 19-Nov-13 18:38
membertanweer19-Nov-13 18:38 
GeneralRe: My vote of 3 Pin
vijayksingh at 19-Nov-13 20:30
professionalvijayksingh19-Nov-13 20:30 
GeneralRe: My vote of 3 Pin
tanweer at 19-Nov-13 22:05
membertanweer19-Nov-13 22:05 
GeneralRe: My vote of 3 Pin
vijayksingh at 20-Nov-13 22:52
professionalvijayksingh20-Nov-13 22:52 
GeneralRe: My vote of 3 Pin
iqbalu at 22-Nov-13 8:02
memberiqbalu22-Nov-13 8:02 
GeneralMy vote of 5 Pin
linuxjr at 6-Oct-13 5:34
professionallinuxjr6-Oct-13 5:34 
GeneralRe: My vote of 5 Pin
tanweer at 6-Oct-13 19:26
membertanweer6-Oct-13 19:26 
GeneralMy vote of 5 Pin
Renju Vinod at 2-Oct-13 21:49
professionalRenju Vinod2-Oct-13 21:49 
GeneralRe: My vote of 5 Pin
tanweer at 2-Oct-13 22:05
membertanweer2-Oct-13 22:05 
QuestionTop 10+ newest jQuery popup window plugins Pin
jQuery By Example at 10-Aug-13 1:00
memberjQuery By Example10-Aug-13 1:00 
QuestionHow to Close this popup after the button click event in aspx page. Pin
priyakanwar at 19-Feb-13 2:14
memberpriyakanwar19-Feb-13 2:14 
AnswerRe: How to Close this popup after the button click event in aspx page. Pin
tanweer akhtar at 20-Feb-13 18:36
membertanweer akhtar20-Feb-13 18:36 
QuestionError while running the Code Pin
ankurgur12 at 17-Jan-13 11:53
memberankurgur1217-Jan-13 11:53 
AnswerRe: Error while running the Code Pin
tanweer akhtar at 18-Jan-13 6:24
membertanweer akhtar18-Jan-13 6:24 
QuestionProblem in using MVC with jquery mobile archtecture Pin
kumar_phogat85 at 8-Nov-12 22:09
memberkumar_phogat858-Nov-12 22:09 
AnswerRe: Problem in using MVC with jquery mobile archtecture Pin
tanweer akhtar at 12-Nov-12 2:24
membertanweer akhtar12-Nov-12 2:24 
QuestionError using the pop up control. Pin
RAMADURAI P at 18-Oct-12 22:27
memberRAMADURAI P18-Oct-12 22:27 
AnswerRe: Error using the pop up control. Pin
tanweer akhtar at 31-Oct-12 21:44
membertanweer akhtar31-Oct-12 21:44 
QuestionHow to access this modal pop up control in server side control (aspx buttons/link buttons) Pin
Issac_developer at 4-Oct-12 2:59
memberIssac_developer4-Oct-12 2:59 
AnswerRe: How to access this modal pop up control in server side control (aspx buttons/link buttons) Pin
tanweer akhtar at 4-Oct-12 3:15
membertanweer akhtar4-Oct-12 3:15 
GeneralRe: How to access this modal pop up control in server side control (aspx buttons/link buttons) Pin
Issac_developer at 4-Oct-12 3:16
memberIssac_developer4-Oct-12 3:16 
GeneralRe: How to access this modal pop up control in server side control (aspx buttons/link buttons) Pin
tanweer akhtar at 4-Oct-12 3:28
membertanweer akhtar4-Oct-12 3:28 

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.150427.1 | Last Updated 12 Jun 2012
Article Copyright 2012 by tanweer
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid