Mohammed Atef’s Technical blog

Complete JS & Jquery popup Div solution

Introduction

Actually, I have write this post to collect list of common features for Popup div in one solution.

Main Features

  • Popup Div
  • Dynamic content using asp .net handler (.ashx)
  • Items click on the Div
  • Close or hide div after clicking outside it.

Brief about the Sample

This is very light sample that shows list of countries retrieved from Database.
once user has select any country from the Div, it shows a message box confirming the selected country.
wherever user click outside this div, it is going to hidden mode.

List of files used

  • testmulticolumnmenu.htm : this file has all html codes that draw the Div and JS codes that bind the div, handle selected item, and finally handle clicking outside the div.
  • BindcmbHandler.ashx : this is asp.net handler to retrieve countries list from database .
  • web.config : this file has common configuration for the web application but it has only connection string to our test Database .
  • jquery-ui.min.js, jquery.min.js : this is common Jquery files.

Sample of source Code

 

 

   1: <html xmlns="http://www.w3.org/1999/xhtml">

   2: <head>

   3:     <title></title>

   4:    <script src="jquery.min.js" type="text/javascript"></script>
   1:

   2:    <script src="jquery-ui.min.js" type="text/javascript">

   1: </script>

   2:    <script type="text/javascript">

   3:

   4:        function bindsub() {

   5:            var objJs;

   6:            $.ajax({

   7:                type: "POST",

   8:                url: "BindcmbHandler.ashx?sub=1",

   9:                async: false,

  10:                cache: false,

  11:                success: function (_result) {

  12:                    objJs = _result.toString();

  13:                },

  14:                error: function (_msg) { }

  15:            });

  16:            var dropdownMenuDiv = document.getElementById("container3");

  17:            dropdownMenuDiv.innerHTML = objJs;

  18:        }

  19:        document.onclick = check;

  20:        function check(e) {

  21:            var target = (e && e.target) || (event && event.srcElement);

  22:            var dropdownMenuDiv = document.getElementById("container3");

  23:            var dropdownMenu = document.getElementById("lnk");

  24:            if (!checkParent(target, "popup1")) {

  25:                // click NOT on the menu

  26:                if (checkParent(target, "lnk")) {

  27:                    // click on the link

  28:                    if (dropdownMenuDiv.style.display == "none" || dropdownMenuDiv.style.display =="") {

  29:                        dropdownMenuDiv.style.display = "block";

  30:                        bindsub();

  31:                    } else { dropdownMenuDiv.style.display = "none"; }

  32:                } else {

  33:                    // click both outside link and outside menu, hide menu

  34:                    dropdownMenuDiv.style.display = "none";

  35:                }

  36:            }

  37:        }

  38:        function checkParent(t, id) {

  39:            while (t.parentNode) {

  40:                if (t == document.getElementById(id)) { return true; }

  41:                t = t.parentNode;

  42:            }

  43:            return false;

  44:        }

  45:          function openpopup(id) {

  46:       //Calculate Page width and height 

  47:       var pageWidth = window.innerWidth;

  48:       var pageHeight = window.innerHeight;

  49:       if (typeof pageWidth != "number"){

  50:       if (document.compatMode == "CSS1Compat"){

  51:             pageWidth = document.documentElement.clientWidth;

  52:             pageHeight = document.documentElement.clientHeight;

  53:       } else {

  54:             pageWidth = document.body.clientWidth;

  55:             pageHeight = document.body.clientHeight;

  56:       }

  57:       }

  58:       //Make the background div tag visible...           

  59:       var divobj = document.getElementById(id);

  60:       if (navigator.appName=="Microsoft Internet Explorer")

  61:       computedStyle = divobj.currentStyle;

  62:       else computedStyle = document.defaultView.getComputedStyle(divobj, null);

  63:       //Get Div width and height from StyleSheet 

  64:       var divWidth = computedStyle.width.replace('px', '');

  65:       var divHeight = computedStyle.height.replace('px', '');

  66:       var divLeft = (pageWidth - divWidth) / 2;

  67:       var divTop = (pageHeight - divHeight) / 2;

  68:       //Set Left and top coordinates for the div tag 

  69:       divobj.style.left = divLeft + "px";

  70:       divobj.style.top = divTop + "px";

  71: }

  72: function closepopup(txt){

  73:     var divobj = document.getElementById('container3');

  74:     divobj.style.display = "none";

  75:     alert('You have select :'+txt+' Country');

  76: }

  77:

</script>

   5:     <style type="text/css">

   6: .popup {

   7:       background-color: white;

   8:       height: 500px; width: 800px;

   9:       border: 1px solid #d3d3d3;

  10:       position: absolute; display: none;

  11:       font-family: Verdana, Geneva, sans-serif;

  12:       font-size: small; text-align: justify;

  13:       padding: 5px; overflow: auto;

  14:       z-index: 1050;

  15: }

  16: </style>

  17: </head>

  18: <body>

  19: <a href="#" onclick="openpopup('container3')" id="lnk">Open Popup Div #1</a>

  20: <div id="container3" class="popup">

  21: alsd;asdkas

  22: </div>

  23: </body>

  24: </html>

Finally you can Download all source code and complete asp.net web site from here

Advertisements

September 4, 2012 - Posted by | XML,XSL,XSLT,DHTML,HML,CSS

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: