js实现非常棒的弹出div【html+js弹窗】js控制DIV弹窗
原创
©著作权归作者所有:来自51CTO博客作者于飞工作室的原创作品,请联系作者获取转载授权,否则将追究法律责任
本文实例为大家分享了一个非常棒的弹出div,供大家参考,具体内容如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
< html > < head > < meta charset = "utf-8" /> < title >LIGHTBOX EXAMPLE</ title > < style > .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.6; opacity:.60; filter: alpha(opacity=60); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; } </ style > < script > function one(){ document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block' } function two(){ document.getElementById('light').style.display='none'; document.getElementById('fade').style.display='none' } </ script > </ head > < body > < p >可以根据自己要求修改css样式 < a href = "javascript:void(0)" onclick = "one()" >点击这里打开窗口</ a > </ p > < div id = "light" class = "white_content" > This is the lightbox content. < a href = "javascript:void(0)" onclick = "two()" >Close</ a > </ div > < div id = "fade" class = "black_overlay" > </ div > </ body > </ html > |
以上就是本文的全部内容,希望对大家有所帮助,希望大家继续关注脚本之家的最新内容。