模態框在網頁中很常見就是在當前頁面中彈出一個框供與客戶交互。
類似于這樣。
首先我們要明白該框工作原理至于怎樣與后端進行交互聯系這邊先不做介紹我們首先是單純的了解怎樣在網頁中實現這樣的一個框圖的顯現。值得注意的是框圖產生時一般的我們滾動鼠標發現網頁仍在移動。實現這樣框圖就是加了兩個盒子
第一個盒子實現背景：
將整個頁面覆蓋（透明色）
第二個盒子實現交互框。
小編這邊來實現一個最簡單的交互框（代碼量可能相對多了一點，主要是因為樣式多了一點整體結構還是非常簡單的）
代碼如下：
模擬框最關鍵的一步就是在對他們樣式寫好時最先以display:none;讓他們不顯示，然后以js觸動改變display再講他們顯現出來。
<title>點擊顯示彈框</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#btn{
text-align: center;
}
.a1{
display: block;
text-decoration: none; //創建一個超鏈接點擊可現實彈框
}
#back{
width: 100%;
height: 100%;
background: rgba(0,0,0,.5); //設置黑色的透明色
position: fixed; //在頁面中絕對定位
top: 0;
left: 0;
z-index: 999; //因為要覆蓋全網頁所以設置一個比較高的權重
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;
} //彈框用樣也是像背景一樣實現
#close_all{
position: absolute;
top:10px;
right:10px;
width:15px;
height:15px;
font-size:15px;
cursor: pointer; //該步鼠標懸停時變小手
} //給×符號定位在右上角
</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">點擊我登錄</a>
</div>
<div id="back"></div>
<div id="login">
<span id="close_all">×</span>
</div>
</body>聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
