您好,登錄后才能下訂單哦!
模態(tài)框在網(wǎng)頁(yè)中很常見就是在當(dāng)前頁(yè)面中彈出一個(gè)框供與客戶交互。
<title>點(diǎn)擊顯示彈框</title> <style type="text/css"> *{ margin: 0; padding: 0; } #btn{ text-align: center; } .a1{ display: block; text-decoration: none; //創(chuàng)建一個(gè)超鏈接點(diǎn)擊可現(xiàn)實(shí)彈框 } #back{ width: 100%; height: 100%; background: rgba(0,0,0,.5); //設(shè)置黑色的透明色 position: fixed; //在頁(yè)面中絕對(duì)定位 top: 0; left: 0; z-index: 999; //因?yàn)橐采w全網(wǎng)頁(yè)所以設(shè)置一個(gè)比較高的權(quán)重 display: none; } #login{ display: none; width: 400px; height: 250px; background-color: #fff; position: fixed; top:50%; left:50%; margin:-125px 0 0 -200px; z-index: 1000; } //彈框用樣也是像背景一樣實(shí)現(xiàn) #close_all{ position: absolute; top:10px; right:10px; width:15px; height:15px; font-size:15px; cursor: pointer; //該步鼠標(biāo)懸停時(shí)變小手 } //給×符號(hào)定位在右上角 </style> <script type="text/javascript"> window.onload=function () { var btn=document.getElementById("btn"); var back=document.getElementById("back"); var login=document.getElementById("login"); var close_all=document.getElementById("close_all"); btn.onclick=function () { back.style.display="block"; login.style.display="block"; } close_all.onclick=function () { back.style.display="none"; login.style.display="none"; } } </script> </head> <body> <div id="btn"> <a href="javascript:;" rel="external nofollow" class="a1">點(diǎn)擊我登錄</a> </div> <div id="back"></div> <div id="login"> <span id="close_all">×</span> </div> </body>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。