www.webdeveloper.com
Results 1 to 4 of 4

Thread: CSS lightbox closing down automatically

  1. #1
    Join Date
    Jun 2012
    Posts
    2

    CSS lightbox closing down automatically

    Hi,

    I have mentioned below a link which tries to submit a cart form to javascript. The JS triggers a lightbox to display the cart information. But I am facing the issue of lightbox closing down automatically. It would be helpful if I get any suggestions to resolve it.

    <p>This is the main content. To display a lightbox click <a id="cart" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.displa y='block'"> <button>Submit</button></a></p>

    Thnaks and Regards,
    Ramesh.

  2. #2
    Join Date
    Aug 2006
    Posts
    301
    the code provided doesn't do anything abnormal, you need to supply more code for us to figure it out. you probably have the link executing the code that hides the box in the wrong place, or it may be on the outer element and when you click the inner element it's bubbling up to the uter element whic detects the click and closes it

  3. #3
    Join Date
    Jun 2012
    Posts
    2
    Hi bsmbahamas,

    Thanks for the reply. I have given the full code below. I hope it will help to identify the issue.
    I changed the code a bit.

    Now finding the issue of triggering two events on one link click. The click action should trigger light box display. The lightbox the should contains the iframe that displays submitted values from the form.

    <!DOCTYPE>

    <html>
    <head>
    <title>
    Simple lightBox effect with css and javascript
    </title>
    <style>
    @CHARSET "ISO-8859-1";

    /* This is a style of dim effect onClick on Register or Log in button - it's the transparent background*/
    .black_overlay1, .black_overlay2{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    }

    /* This is a style for log in and registration form */
    .white_box {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 5px solid #84679f;
    background-color: white;
    z-index:1002;
    overflow: auto;
    }
    </style>
    <script type="text/javascript">
    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
    window.onload = func;
    } else {
    window.onload = function() {
    if (oldonload) {
    oldonload();
    }
    func();
    }
    }
    }
    addLoadEvent(function() {
    showPage1();
    }
    );
    // Change the ww number to yours //
    var baseUrl = "http://ww7.aitsafe.com/cf/review.cfm?";
    function showPage1 () {
    // Change the showPage to your userid //
    showPage (document.getElementById ("userid=60400426"));
    }
    </script>


    <script type="text/javascript">
    function showPage(el) {
    var div = document.getElementById ("light1");
    //alert(baseUrl);
    //alert(el.id);
    page = baseUrl + el.id;
    //alert(page);
    // Change the size of the frame //
    alert(page);
    div.innerHTML = "<iframe src ='"+ page +"' width='800px' height='450px' scrolling='auto'>";
    //event.stopPropagation();
    //

    }

    </script>

    <!--[if IE]>
    <script type="text/javascript">
    var newWindow = window.open( link, '_blank', prop_str );
    if( newWindow ){
    if( newWindow.focus ) newWindow.focus();
    return false;
    }
    return true;
    </script>
    <![endif]-->

    </head>
    <body>
    <form action="http://ww7.aitsafe.com/cf/addmulti.cfm" method="post" target="_self" name="cart" id="cart">
    <input type="hidden" name="userid" value="60400426">
    <input type="hidden" name="thumb" value="logo.png">
    <input type="hidden" name="nocart">
    <input type="hidden" name="return" value="http://index.html">


    <table class="wrapper5">

    <tr>

    <td id="name_header">Product</td>
    <td id="cost_header">Cost</td>

    <td>
    <br>
    </td>
    </tr>
    <tr>
    <td id="name">Product</td> <td id="cost">22.00</td> <td> <input type="checkbox" id="qty1" name="qty1" value="1"> </td>

    </tr>
    <tr>
    <td id="desc">Product</td>
    </tr>

    <tr>
    <input type="hidden" name="product1" value="p1">
    <input type="hidden" name="scode1" id="scode1" value="p1">
    <input type="hidden" name="price1" id="price1" value="22.00"> </tr>

    </table> <br>

    <!-- BUTTONS for LogIn and Register -->

    <a href="javascript:void(0)" onclick = "document.getElementById('light1').style.display='block';document.getElementById('fade').style.displ ay='block'">PFC</a>


    <!-- LOG IN FORM - WRITE DOWN HERE -->
    <div id="light1" class="white_box">

    </div>


    <!-- Javascript for hidding div with LogIn form and the fade effect with it -->

    <a onclick="document.getElementById('light2').style.display='none';document.getElementById('fade').styl e.display='none'" href="javascript:void(0)">
    <div id="fade" class="black_overlay1" onclick ="document.getElementById('cart').submit(); void(0);" onclick = "document.getElementById('light1').style.display='none';document.getElementById('fade').style.displa y='none'">
    </div>
    </a>

    <p><a href="#" id="userid=60400426" onclick="showPage(this)"></a></p>

    <!-- Other content on the page -->


    </form>
    </body>
    </html>

    Any help would be really helpful.

  4. #4
    Join Date
    Aug 2006
    Posts
    301
    your onclicks should call a function instead of having so many statements chained together, for example <a onclick="toggleLightBox()" href="javascript:void(0)">, and you really should have just one onclick within the div or alternately on the anchor tag that is wrapping the div. several of the id you are trying to access light1, light2, cart and fade don't appear int he html code either.

    but your real problem seems to be with this part of the code as you have the #fade div wrapped in an anchor tag which triggers an onclick, and the div itself also has an onclick in it, so you may be triggering the outer onclick at the same time you click on the div which also has an onclick, you also have several space characters within the names:

    Code:
    <a onclick="document.getElementById('light2').style.display='none';document.getElementById('fade').styl*e.display='none'" href="javascript:void(0)">
    <div id="fade" class="black_overlay1" onclick ="document.getElementById('cart').submit(); void(0);" onclick = "document.getElementById('light1').style.display='none';document.getElementById('fade').style.displa*y='none'"></div>
    </a>
    the above code could then be refactored as:

    <div id="fade" class="black_overlay1" onclick ="submitCart()"></div>

    and all that code in the onclicks is equivalent to...

    function submitCart(){
    document.getElementById('light1').style.display='none';
    document.getElementById('light2').style.display='none';
    document.getElementById('fade').style.display='none';
    document.getElementById('cart').submit();
    }

    or you could employ a toggle function like this:

    function toggleCart(){
    if( document.getElementById('light2').style.display == 'block' ){
    document.getElementById('light1').style.display='none';
    document.getElementById('light2').style.display='none';
    document.getElementById('fade').style.display='none';
    document.getElementById('cart').submit();
    } else {
    document.getElementById('light1').style.display='block';
    document.getElementById('light2').style.display='block';
    document.getElementById('fade').style.display='block';
    }
    }

    it seems like you simply have to many onclicks firing all at once,
    so i suggest you create a showCart() and hideCart() functions,
    or a toggleCart() function and put that in just one of the onclicks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles