SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best way to close a popup div with onclick

    So we have some basic Javascript that shows/hides a div based on an "onclick" event on a link. No big deal with that.

    However, the div is about 400px wide and 200px tall. The issue comes down to closing the div when someone clicks outside that container.

    We could utilize a simple "close" link inside the box, but I want to utilize typical user behavior which means they have a better chance of clicking outside the div somewhere on the page to remove that box.

    Besides placing a 100% x 100% absolute positioned div somewhere on the page with an onclick event on it (which I believe could affect the usability of some elements "under that container" on the page), is there another easier way I can pull this off?

    any help is appreciated.

    Thanks,
    Bryan

  2. #2
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I found a script that works, but I honestly have no clue what the javascript is doing.

    Could someone more or less summarize what the javascript says in english?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    <!--
    #mydiv{
        background-color: #999999;
        height: 100px;
        width: 100px;
        display:none;
    }
    -->
    </style>
    <script type="text/javascript">
    document.onclick=check;
    function check(e){
    var target = (e && e.target) || (event && event.srcElement);
    var obj = document.getElementById('mydiv');
    var obj2 = document.getElementById('sho');
    checkParent(target)?obj.style.display='none':null;
    target==obj2?obj.style.display='block':null;
    }
    function checkParent(t){
    while(t.parentNode){
    if(t==document.getElementById('mydiv')){
    return false
    }
    t=t.parentNode
    }
    return true
    }
    </script>
    </head>
    <body>
    <span id="sho" style="cursor:pointer">show the div</span>
    <div id="mydiv">
    <table width="50" border="0" cellpadding="2" cellspacing="1" bgcolor="#99FFCC">
    <tr>
    <td>we</td>
    <td>e</td>
    </tr>
    <tr>
    <td>rtr</td>
    <td>rty</td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    Gracias.

    Bryan


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •