JS實(shí)現(xiàn)圖片點(diǎn)擊后出現(xiàn)模態(tài)框效果
很多時(shí)候我們?cè)跒g覽圖片時(shí),會(huì)發(fā)現(xiàn)點(diǎn)擊圖片后,會(huì)彈出一個(gè)被點(diǎn)擊圖片的放大圖片浮在頁(yè)面上,占滿整個(gè)窗口。這就是圖片模態(tài)框效果。
這個(gè)效果可以使用某些js庫(kù)實(shí)現(xiàn),如bpopupJs
。但是在這里我們使用純js實(shí)現(xiàn),能夠更好理解效果原理和實(shí)現(xiàn)方法。
一.實(shí)現(xiàn)思路
我們點(diǎn)擊小圖片之后,圖片模態(tài)框出現(xiàn),同時(shí)圖片模態(tài)框上有一個(gè)關(guān)閉按鈕和圖片的標(biāo)題。
因此,我們的實(shí)現(xiàn)思路就是:
圖片模態(tài)框有大圖片,關(guān)閉按鈕,圖片標(biāo)題三部分。
將圖片模態(tài)框隱藏,在點(diǎn)擊小圖片之后,模態(tài)框出現(xiàn)。
點(diǎn)擊關(guān)閉按鈕后,模態(tài)框隱藏。
二.HTML代碼
首先,我們的原始頁(yè)面上有一個(gè)圖片如下:
HTML代碼如下:
<h2>圖片點(diǎn)擊彈出模態(tài)框效果</h2> <p>圖片模態(tài)框很不錯(cuò),是個(gè)值得學(xué)習(xí)的效果</p> <img src="star.jpeg" id="real" alt="model test picture">
模態(tài)框的HTML代碼如下:
<div class="motai" id="mo"> <span class="close" id="close">×</span> <img class="motaiimg" id="moimg"> <div id="caption"></div> </div>
三.css代碼
我們需要通過(guò)css設(shè)置模態(tài)框中各元素的表現(xiàn)效果同時(shí)將其隱藏起來(lái),具體有如下幾步:
1.模態(tài)框
#mo{ display: none;/*隱藏模態(tài)框*/ width: 100%; height: 100%; position: fixed;/*定位方式為固定定位*/ overflow: auto;/*不滾動(dòng)*/ background-color: rgba(0,0,0,0.7); top: 0px; left: 0px; z-index: 1;/*置于頁(yè)面圖層之上*/ }
2.關(guān)閉按鈕
.close{ font-size: 40px; font-weight: bold; position: absolute; top: 20px; right: 14%; color:#f1f1f1; } .close:hover, .close:focus{ color:#bbb; cursor:pointer; }
3.模態(tài)框中圖片
#moimg{ display: block;/*圖片表現(xiàn)為塊*/ margin:25px auto;/*圖片居中對(duì)齊*/ width: 60%; max-width: 750px;/*自適應(yīng)布局*/ }
4.圖片標(biāo)題
#caption{ text-align: center;/*文本居中*/ margin: 15px auto; width: 60%; max-height: 750px; font-size: 20px; color:#ccc; }
以上就是基本的模態(tài)框各元素的css代碼,如果想實(shí)現(xiàn)點(diǎn)擊后擴(kuò)大的動(dòng)畫效果,可以增加以下代碼:
#moimg,#caption{ -webkit-animation: first 1s; -o-animation: first 1s; animation: first 1s; } @keyframes first{ from{transform: scale(0.1);} to{transform: scale(1);} }
通過(guò)以上步驟,我們已經(jīng)制作好了模態(tài)框頁(yè)面。在使用js來(lái)完成交互效果就可以了。
四.js代碼
js代碼主要是圖片和關(guān)閉按鈕的點(diǎn)擊交互,需要注意的是js代碼須位于模態(tài)框HTML代碼之后,js具體代碼如下,:
var motai=document.getElementById('mo') var moimg=document.getElementById("moimg") var realimg=document.getElementById("real") var caption=document.getElementById("caption") realimg.onclick=function(){ motai.style.display="block" moimg.src=this.src caption.innerHTML=this.alt } var span=document.getElementById("close"); span.onclick=function(){ motai.style.display="none"; }
通過(guò)以上步驟,圖片的模態(tài)框效果就實(shí)現(xiàn)了,
最后總的代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>close</title> <style> #real{ /*點(diǎn)擊彈出模態(tài)框的圖片*/ margin: 30px; width: 250px; border-radius:6px; } #real:hover{ opacity: 0.6; } #mo{ display: none;/*隱藏*/ width: 100%; height: 100%; position: fixed; overflow: auto; background-color: rgba(0,0,0,0.7); top: 0px; left: 0px; z-index: 1; } #moimg{ display: block; margin:25px auto; width: 60%; max-width: 750px; } #caption{ text-align: center; margin: 15px auto; width: 60%; max-height: 750px; font-size: 20px; color:#ccc; } #moimg,#caption{ -webkit-animation: first 1s; -o-animation: first 1s; animation: first 1s; } @keyframes first{ from{transform: scale(0.1);} to{transform: scale(1);} } .close{ font-size: 40px; font-weight: bold; position: absolute; top: 20px; right: 14%; color:#f1f1f1; } .close:hover, .close:focus{ color:#bbb; cursor:pointer; } @media only screen and(max-width:750px ) { #moimg{ width: 100%; } } </style> </head> <body> <h2>圖片點(diǎn)擊彈出模態(tài)框效果</h2> <p>圖片模態(tài)框很不錯(cuò),是個(gè)值得學(xué)習(xí)的效果</p> <img src="star.jpeg" id="real" alt="model test picture"> <!--圖片模態(tài)框 --> <div class="motai" id="mo"> <span class="close" id="close">×</span> <img class="motaiimg" id="moimg"> <div id="caption"></div> </div> <script> var motai=document.getElementById('mo') var moimg=document.getElementById("moimg") var realimg=document.getElementById("real") var caption=document.getElementById("caption") realimg.onclick=function(){ motai.style.display="block" moimg.src=this.src caption.innerHTML=this.alt } var span=document.getElementById("close"); span.onclick=function(){ motai.style.display="none"; } </script> </body> </html>
以上所述是小編給大家介紹的JS實(shí)現(xiàn)圖片點(diǎn)擊后出現(xiàn)模態(tài)框效果,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- AngularJs 彈出模態(tài)框(model)
- js實(shí)現(xiàn)簡(jiǎn)單模態(tài)框?qū)嵗?/a>
- Vue.js彈出模態(tà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的使用詳解
- 原生js實(shí)現(xiàn)簡(jiǎn)單的模態(tài)框示例
- JavaScript+CSS實(shí)現(xiàn)模態(tài)框效果
相關(guān)文章
js實(shí)現(xiàn)隨機(jī)點(diǎn)名系統(tǒng)(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)隨機(jī)點(diǎn)名系統(tǒng)(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10javascript實(shí)現(xiàn)鼠標(biāo)選取拖動(dòng)或Ctrl選取拖動(dòng)
javascript實(shí)現(xiàn)鼠標(biāo)選取拖動(dòng)或Ctrl選取拖動(dòng)...2007-06-06微信小程序 調(diào)用微信授權(quán)窗口相關(guān)問(wèn)題解決
這篇文章主要介紹了微信小程序 調(diào)用微信授權(quán)窗口相關(guān)問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-0720行JS代碼實(shí)現(xiàn)粘貼板復(fù)制功能
本文給大家分析20行JS代碼實(shí)現(xiàn)粘貼板功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02JavaScript設(shè)計(jì)模式之工廠方法模式介紹
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之工廠方法模式介紹,本文講解了簡(jiǎn)單工廠模式、多個(gè)工廠方法模式等內(nèi)容,需要的朋友可以參考下2014-12-12js實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08不使用JavaScript實(shí)現(xiàn)菜單的打開和關(guān)閉效果demo
本文通過(guò)實(shí)例代碼給大家分享在不使用JavaScript實(shí)現(xiàn)菜單的打開和關(guān)閉效果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2018-05-05JS 兩個(gè)字符串時(shí)間的天數(shù)差計(jì)算
本文為大家介紹下兩個(gè)字符串時(shí)間的天數(shù)差的計(jì)算公式,感興趣的朋友可以參考下2013-08-08