Thursday, June 27, 2013

How to create a simple Popup window using jQuery?

Hi everyone, Hope all are doing good.Here in this post i would like to demonstrate you on how to create a simple pop-up window using jQuery.Though there are many other ways you can create a pop-up ,evolution of jQuery kept it too simple which made me to share with you a brief and simple example in which we create a beautiful pop-up window on clicking a simple link.
By the way ,We all know how frequent we come across pop-up windows througout the web environment.Pop-up windows made it  flexible to display message,alert or even a form to fill instaltly without being redirected to a new form.Ultimately it lessens the burden on the server reducing the number of page traversals and postbacks.

When you open the html file given below in a browser it renders a page with a single link Click here to see Pop-UpThe moment you click the link a window pops up in which i have displayed some text.Instead of text it could be even a form which can be made to be filled and posted to the server or to any other page linked to it.


The whole document is given below in which i included the stylesheet and jQuery script files too.Copy the code into your webform and run or directly open it in your browser.
<html>
<head>
    <style type="text/css">
        .popupBody * {
            MARGIN-RIGHT15px;
        }
 
        .popupBody {
            OVERFLOWauto;
            HEIGHT500px;
            MARGIN-LEFT7%;
            WIDTH92.8%;
        }
 
        .popupTitle {
            BACKGROUND-COLOR#e13e43;
            border-top-left-radius5px;
            border-top-right-radius5px;
        }
 
            .popupTitle H2 {
                HEIGHT40px;
                COLORwhite;
                PADDING-BOTTOM5px;
                PADDING-TOP15px;
                PADDING-LEFT20px;
                MARGIN0px;
            }
 
        #lean_overlay {
            HEIGHT100%;
            BACKGROUND#000;
            POSITIONfixed;
            LEFT0px;
            FILTERalpha(opacity=30);
            Z-INDEX100;
            DISPLAYnone;
            TOP0px;
            WIDTH100%;
            opacity0.3;
        }
 
        .popupClose {
            RIGHT12px;
            POSITIONabsolute;
            Z-INDEX2;
            TOP12px;
            text-decorationnone;
            colorwhite;
        }
 
        .popupContent {
            BORDER-TOP#ccc 1px solid;
            BORDER-RIGHT#ccc 1px solid;
            BORDER-BOTTOM#ccc 1px solid;
            BORDER-LEFT#ccc 1px solid;
            DISPLAYnone;
            TOP10%;
            width35%;
            height45%;
        }
 
        .popupWindow {
            WORD-WRAPbreak-word;
            FONT-SIZE13px;
            HEIGHTauto;
            FONT-FAMILYsan serif;
            BACKGROUNDwhite;
            POSITIONabsolute;
            MARGIN-LEFT28%;
            Z-INDEX11000;
            LETTER-SPACING1px;
            WIDTH40%;
            -moz-box-shadow0 0px 4px rgba(0, 0, 0, 0.7);
            -webkit-box-shadow0 0 4px rgba(0, 0, 0, 0.7);
            box-shadow0px 0px 4px rgba(0, 0, 0, 0.7);
            border-radius5px;
            -moz-border-radius5px;
            -webkit-border-radius5px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            /****** Close popup ******/
            $(document).on('click''.popupClose'function (e) {
                e.preventDefault();
                $('.popupWindow').css('display''none').removeClass('popupWindow');
                $("#lean_overlay").remove();
            });
            /******Trigger popup ********/
            $('.popupTrigger').click(function () {
                var dialog = $(this).next('.popupContent');
                $('.popupClose').css('display''block');
                dialog.css('display''block').addClass('popupWindow');
 
                var overlay = $("<div id='lean_overlay'> </div>").css('display''block').addClass('popupClose');
                $("body").append(overlay);
                return false;
            });
        });
 
    </script>
 
</head>
<body>
 
    <div class="popup">
        <a class="popupTrigger" href="#">Click here to see popup</a>
        <!--  This is the model popup content  -->
        <div class="popupContent">
            <!-- Titel for popup goes in <h2> tag ---->
            <div class="popupTitle">
                <h2>Simple pop up using jquery </h2>
            </div>
            <!-- Body of popup goes into <p> tag -->
            <div class="popupBody">
                <a class="popupClose" href="">Close</a>
                <p>
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.                 </p>             </div>         </div>     </div> </body>
Now you are able to create a simple and beautiful pop-up window.You can try not only plain text in it but also design according to our taste and could even create a form with any control you could use in your webpages.Hope you understand this and try to apply it in your applications whereever you feel it required.

6 comments:

  1. HI I followed the steps mentioned above but could not not make it working. could you please let what else need to be done

    ReplyDelete
    Replies
    1. Hi Narayan, Sorry for not updating for a long time ,You can try it now it's working fine.

      Delete
  2. Replies
    1. It works now ,I have updated it. Sorry for the trouble.

      Delete
  3. Thank you very much this is working fine as per my requirements

    ReplyDelete
  4. Hi, is there a way to show the popup-window on loading a Sharepoint page?

    ReplyDelete