js實(shí)現(xiàn)非常棒的彈出div
本文實(shí)例為大家分享了一個(gè)非常棒的彈出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()">點(diǎn)擊這里打開窗口</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)容,希望對(duì)大家有所幫助,希望大家繼續(xù)關(guān)注腳本之家的最新內(nèi)容。
- 基于javascript實(shí)現(xiàn)按圓形排列DIV元素(一)
- javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁面 移動(dòng)DIV
- JS控制div跳轉(zhuǎn)到指定的位置的幾種解決方案總結(jié)
- 完美的js div拖拽實(shí)例代碼
- 基于JavaScript實(shí)現(xiàn)鼠標(biāo)向下滑動(dòng)加載div的代碼
- AngularJS動(dòng)態(tài)生成div的ID源碼解析
- JS獲取一個(gè)未知DIV高度的方法
- JavaScript鼠標(biāo)事件,點(diǎn)擊鼠標(biāo)右鍵,彈出div的簡單實(shí)例
- js動(dòng)態(tài)添加的DIV中的onclick事件簡單實(shí)例
- js 動(dòng)態(tài)添加元素(div、li、img等)及設(shè)置屬性的方法
- JS把內(nèi)容動(dòng)態(tài)插入到DIV的實(shí)現(xiàn)方法
- 基于javascript實(shí)現(xiàn)按圓形排列DIV元素(二)
相關(guān)文章
Layui帶搜索的下拉框的使用以及動(dòng)態(tài)數(shù)據(jù)綁定方法
今天小編就為大家分享一篇Layui帶搜索的下拉框的使用以及動(dòng)態(tài)數(shù)據(jù)綁定方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript數(shù)組函數(shù)unshift、shift、pop、push使用實(shí)例
這篇文章主要介紹了JavaScript數(shù)組函數(shù)unshift、shift、pop、push使用實(shí)例,本文先是講解了聲明數(shù)組的方法,然后對(duì)4個(gè)函數(shù)使用給出了一些例子,需要的朋友可以參考下2014-08-08Bootstrap響應(yīng)式導(dǎo)航由768px變成992px的實(shí)現(xiàn)代碼
這篇文章主要介紹了Bootstrap響應(yīng)式導(dǎo)航由768px變成992px,需要的朋友可以參考下2017-06-06layui實(shí)現(xiàn)點(diǎn)擊按鈕給table添加一行
想實(shí)現(xiàn)點(diǎn)擊按鈕在表格添加一行的功能,但發(fā)現(xiàn)layui并未集成該工具欄,因此,需要自己手動(dòng)添加這個(gè)功能;這篇文章主要介紹了layui點(diǎn)擊按鈕給table添加一行,需要的朋友可以參考下2018-08-08JS獲取浮動(dòng)(float)元素的style.left值為空的快速解決辦法
這篇文章主要介紹了JS獲取浮動(dòng)(float)元素的style.left值為空的快速解決辦法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02javascript 實(shí)現(xiàn)的類似hao123的多郵箱登錄效果
javascript 實(shí)現(xiàn)的類似hao123的多郵箱登錄效果...2007-08-08