溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
模態框在網頁中很常見就是在當前頁面中彈出一個框供與客戶交互。
類似于這樣。
首先我們要明白該框工作原理至于怎樣與后端進行交互聯系這邊先不做介紹我們首先是單純的了解怎樣在網頁中實現這樣的一個框圖的顯現。值得注意的是框圖產生時一般的我們滾動鼠標發現網頁仍在移動。實現這樣框圖就是加了兩個盒子
第一個盒子實現背景：
將整個頁面覆蓋（透明色）
第二個盒子實現交互框。
小編這邊來實現一個最簡單的交互框（代碼量可能相對多了一點，主要是因為樣式多了一點整體結構還是非常簡單的）
代碼如下：
模擬框最關鍵的一步就是在對他們樣式寫好時最先以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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
