原生js實(shí)現(xiàn)簡(jiǎn)單的模態(tài)框示例
html部分:
<img src="images/8.jpg" alt=""> <button class="btn" id="showMax">顯示大圖</button> <div id="modalBox" class="modalBox"> <div class="modalBox-matter"> <header class="modalBox-header"> <span class="mtclose">×</span> </header> <div class="modalBox-body"> <img src="images/8-1.jpg"> </div> </div> </div>
js部分:
var btn = document.getElementById('showMax'); var mtclose = document.getElementsByClassName('mtclose')[0]; var modalBox = document.getElementById('modalBox'); btn.addEventListener('click', function(){ modalBox.style.display = "block"; }); mtclose.addEventListener('click', function(){ modalBox.style.display = "none"; });
css部分:
.btn{ width: 100px; height: 35px; border-radius: 5px; font-size: 16px; color: #F97B39; position: absolute; top: 130px; left: 160px; opacity: 0.2; cursor: pointer; /*鼠標(biāo)小手*/ } .btn:hover, .btn:focus{ /*focus 取得焦點(diǎn)狀態(tài)*/ background-color: #8AA7F9; opacity: 0.5; color: #FFFFFF; } .modalBox{ display: none; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 1000; background-color: rgba(0,0,0,0.5); } .modalBox-matter{ display: flex; /*/*彈性布局*/ flex-flow: column nowrap; justify-content: space-between; /*兩端對(duì)齊*/ width: 50%; height: 80%; margin: 30px auto 100px; border-radius:10px; -webkit-animation: zoom 0.6s; animation: zoom 0.6s; resize: both; overflow: auto; } @keyframes zoom{ from {transform: scale(0)} to {transform: scale(1)} } .modalBox-header{ margin-left: 617px; } .mtclose{ color: #602E2A; font-size: 3em; font-weight: bold; transition: all 0.3s; /*z-index: 1010; */ } .mtclose:hover, .mtclose:focus{ color: #602E2A; cursor: pointer; } .modalBox-body{ padding: 10px; font-size: 16px; }
效果
因?yàn)檎谶M(jìn)行的一個(gè)項(xiàng)目中,需要一個(gè)模態(tài)框,所以花時(shí)間在網(wǎng)上自學(xué)的,相對(duì)來(lái)說(shuō)比較簡(jiǎn)單,可以自行修改內(nèi)容。。。
以上這篇原生js實(shí)現(xiàn)簡(jiǎn)單的模態(tài)框示例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- AngularJs 彈出模態(tài)框(model)
- JS實(shí)現(xiàn)圖片點(diǎn)擊后出現(xiàn)模態(tài)框效果
- js實(shí)現(xiàn)簡(jiǎn)單模態(tài)框?qū)嵗?/a>
- Vue.js彈出模態(tài)框組件開(kāi)發(fā)的示例代碼
- js利用事件的阻止冒泡實(shí)現(xiàn)點(diǎn)擊空白模態(tài)框的隱藏
- angularJS模態(tài)框$modal實(shí)例代碼
- AngularJS中使用ngModal模態(tài)框?qū)嵗?/a>
- bootstrap Validator 模態(tài)框、jsp、表單驗(yàn)證 Ajax提交功能
- AngularJS模態(tài)框模板ngDialog的使用詳解
- JavaScript+CSS實(shí)現(xiàn)模態(tài)框效果
相關(guān)文章
JavaScript語(yǔ)言中的Literal Syntax特性分析
JavaScript語(yǔ)言中的Literal Syntax特性分析...2007-03-03D3.js 從P元素的創(chuàng)建開(kāi)始(顯示可加載數(shù)據(jù))
D3是一個(gè)基于數(shù)據(jù)操作的可視化js庫(kù),認(rèn)識(shí)d3,就從最基礎(chǔ)的顯示可加載數(shù)據(jù)談起,需要的朋友可以參考下2014-10-10JavaScript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊導(dǎo)航欄變色特效
本文給大家分享一段基于js代碼實(shí)現(xiàn)的鼠標(biāo)點(diǎn)擊導(dǎo)航欄變色效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下2017-02-02parabola.js拋物線與加入購(gòu)物車(chē)效果的示例代碼
本篇文章主要介紹了parabola.js拋物線與加入購(gòu)物車(chē)效果的示例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10javascript實(shí)現(xiàn)相同事件名稱(chēng),不同命名空間的調(diào)用方法
這篇文章主要介紹了javascript實(shí)現(xiàn)相同事件名稱(chēng),不同命名空間的調(diào)用方法,涉及javascript命名空間及事件調(diào)用的技巧,需要的朋友可以參考下2015-06-06深入學(xué)習(xí)JavaScript對(duì)象
今天小編就和大家深入學(xué)習(xí)JavaScript對(duì)象,感興趣的小伙伴們可以參考一下,大家一起學(xué)習(xí)。2015-10-10使用focus方法讓光標(biāo)默認(rèn)停留在INPUT框
讓光標(biāo)默認(rèn)停留在INPUT框中,用focus方法可以實(shí)現(xiàn),下面有個(gè)示例代碼,需要的朋友可以參考下2014-07-07