javascript - multiple pop up div's in the same page -
in 1 of projects, have requirement of multiple pop div's on same page. means when user clicks on link, content should open in pop up. there many such links own pop ups. little knowledge of javascript, have tried write javascript works 1 pop up. when click on second, third... links, first pop opens rather opening second, third... pop ups. here code. please tell modifications it.
<!doctype html> <html > <head> <script> window.document.onkeydown = function (e) { if (!e) { e = event; } if (e.keycode == 27) { lightbox_close(); } } function lightbox_open() { window.scrollto(0,0); document.getelementbyid('light').style.display='block'; document.getelementbyid('fade').style.display='block'; } function lightbox_close() { document.getelementbyid('light').style.display='none'; document.getelementbyid('fade').style.display='none'; } </script> <style> #fade { display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: #000; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70); } #light { display: none; position: absolute; top: 50%; left: 50%; width: 300px; height: 200px; margin-left: -150px; margin-top: -100px; padding: 10px; border: 2px solid #fff; background: #ccc; z-index:1002; overflow:visible; } </style> </head> <body> <a href="#" onclick="lightbox_open();">open 1</a> <div id="light">div 1</div> <div id="fade" onclick="lightbox_close();"></div> <a href="#" onclick="lightbox_open();">open 2</a> <div id="light">div 2</div> <div id="fade" onclick="lightbox_close();"></div> <a href="#" onclick="lightbox_open();">open 3</a> <div id="light">div 3</div> <div id="fade" onclick="lightbox_close();"></div> </body> </html>
here's way accomplish want. i'm sure can improved, it's then.
first, ids should unique across page. if want group elements, give them shared class instead.
with changes, html this:
<a href="#" class="lightbox" onclick="lightbox_open(this)">open 1</a> <div class="light">div 1</div> <div class="fade" onclick="lightbox_close()"></div> <a href="#" class="lightbox" onclick="lightbox_open(this)">open 2</a> <div class="light">div 2</div> <div class="fade" onclick="lightbox_close()"></div> <a href="#" class="lightbox" onclick="lightbox_open(this)">open 3</a> <div class="light">div 3</div> <div class="fade" onclick="lightbox_close()"></div> your css:
html, body { width: 100%; height: 100%; } .fade { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70); } .light { display: none; position: absolute; top: 50%; left: 50%; width: 300px; height: 200px; margin-left: -150px; margin-top: -100px; padding: 10px; border: 2px solid #fff; background: #ccc; z-index:1002; overflow:visible; } and javascript:
window.document.onkeydown = function (e) { if (!e) { e = event; } if (e.keycode == 27) { lightbox_close(); } } // note function receiving clicked element reference. function lightbox_open(el) { window.scrollto(0,0); // anchors have class lightbox. var anchors = document.queryselectorall('a.lightbox'); // elements class light. var lite = document.queryselectorall('.light'); // elements class fade. var fade = document.queryselectorall('.fade'); // iterate on anchors elements. (var = 0; < anchors.length; i++) { // if anchor matches clicked one. if (anchors[i] == el) { // lite , fade same index // , display them. light[i].style.display = 'block'; fade[i].style.display = 'block'; } } } function lightbox_close() { // elements class lite or fade. var els = document.queryselectorall('.light, .fade'); // loop through list. (var = 0; < els.length; i++) { // hide them. els[i].style.display = 'none'; } } demo
javascript jquery html css
No comments:
Post a Comment