js實現(xiàn)非常棒的彈出div
更新時間:2016年10月06日 07:13:59 作者:jcuan
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)非常棒的彈出div,具有一定的參考價值,感興趣的朋友可以參考一下
本文實例為大家分享了一個非常棒的彈出div,供大家參考,具體內(nèi)容如下
<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>可以根據(jù)自己要求修改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>
以上就是本文的全部內(nèi)容,希望對大家有所幫助,希望大家繼續(xù)關(guān)注腳本之家的最新內(nèi)容。
您可能感興趣的文章:
- 基于javascript實現(xiàn)按圓形排列DIV元素(一)
- javascript實現(xiàn)鼠標(biāo)點擊頁面 移動DIV
- JS控制div跳轉(zhuǎn)到指定的位置的幾種解決方案總結(jié)
- 完美的js div拖拽實例代碼
- 基于JavaScript實現(xiàn)鼠標(biāo)向下滑動加載div的代碼
- AngularJS動態(tài)生成div的ID源碼解析
- JS獲取一個未知DIV高度的方法
- JavaScript鼠標(biāo)事件,點擊鼠標(biāo)右鍵,彈出div的簡單實例
- js動態(tài)添加的DIV中的onclick事件簡單實例
- js 動態(tài)添加元素(div、li、img等)及設(shè)置屬性的方法
- JS把內(nèi)容動態(tài)插入到DIV的實現(xiàn)方法
- 基于javascript實現(xiàn)按圓形排列DIV元素(二)
相關(guān)文章
Layui帶搜索的下拉框的使用以及動態(tài)數(shù)據(jù)綁定方法
今天小編就為大家分享一篇Layui帶搜索的下拉框的使用以及動態(tài)數(shù)據(jù)綁定方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript數(shù)組函數(shù)unshift、shift、pop、push使用實例
這篇文章主要介紹了JavaScript數(shù)組函數(shù)unshift、shift、pop、push使用實例,本文先是講解了聲明數(shù)組的方法,然后對4個函數(shù)使用給出了一些例子,需要的朋友可以參考下2014-08-08Bootstrap響應(yīng)式導(dǎo)航由768px變成992px的實現(xiàn)代碼
這篇文章主要介紹了Bootstrap響應(yīng)式導(dǎo)航由768px變成992px,需要的朋友可以參考下2017-06-06JS獲取浮動(float)元素的style.left值為空的快速解決辦法
這篇文章主要介紹了JS獲取浮動(float)元素的style.left值為空的快速解決辦法,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-02-02javascript 實現(xiàn)的類似hao123的多郵箱登錄效果
javascript 實現(xiàn)的類似hao123的多郵箱登錄效果...2007-08-08