CODEWITHSUNDEEP
javascriptcsslightbox
Topher
Topher

Reputation: 183

CSS Lightbox on LOAD

I'm trying to convert this lightbox code to being able to open on load, not on click of the link (which I would want to remove).

I can't seem to get it working. Any ideas?

 <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
Show PopUp</a>

 <div class="white_content" id="light">
    <a class="textright" href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
    Close</a>

      <div id="lbcontent">
           <p>THIS IS MY LIGHTBOX CONTENT</p>
      </div>
 </div>
 <div class="black_overlay" id="fade"></div>

Upvotes: 1

Views: 82

Answers (2)

KAD
KAD

Reputation: 11102

create a js function loadLightBox and call it onload of body tag

        <script language="javascript">

        function loadLightBox()
        {    
           document.getElementById('light').style.display='block';
           document.getElementById('fade').style.display='block';
        }

        </script>

        <body onload = "loadLightBox()">

        ...

Upvotes: 0

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

<script>
  document.addEventListener('load', function() {
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block'
  }, false);
</script>

Upvotes: 1

Related Questions