Laksanakan kesan halaman timbul berdasarkan kemahiran Javascript_javascript

Kesan lapisan pop timbul ialah fungsi yang sangat praktikal. Banyak tapak web menggunakan kaedah ini untuk melaksanakan log masuk dan pendaftaran, seperti Baidu:

Ciri-ciri lapisan pop timbul: Apabila anda mengklik log masuk atau pendaftaran, kawasan log masuk atau pendaftaran muncul di tengah-tengah halaman dan halaman itu mempunyai lapisan topeng, dan kotak log masuk berada di atas lapisan topeng, yang ialah z- kotak log masuk Nilai indeks hendaklah lebih besar daripada nilai indeks z lapisan topeng. Tutup kotak log masuk atau pendaftaran apabila mengklik tutup atau lapisan topeng (sesetengah halaman web tidak melaksanakan fungsi mengklik lapisan topeng untuk menutup kawasan log masuk atau pendaftaran.).

Baru-baru ini saya telah membuat kesan lapisan pop timbul yang serupa, mari tunjukkan kesan akhir dahulu:

Bercakap secara ringkas tentang proses pelaksanaan.

Pertama ialah lapisan topeng. Lapisan topeng dicipta semasa pemuatan dinamik halaman Oleh kerana lapisan topeng perlu meliputi keseluruhan halaman, ketinggian lapisan topeng dikira dalam JavaScript, dan lebarnya adalah lebar keseluruhan halaman Mudah dapat. Anda juga perlu menetapkan nilai indeks-z untuknya, sebesar mungkin, kerana anda perlu meliputi keseluruhan halaman. Sudah tentu ketelusan juga perlu.

#mask{ 
background: #000;
opacity: .6;
filter:alpha(opacity=60);
position:absolute;
left:0;
top:0;
width:100%;
height:1000px;/*动态获取，这里设置高度是为了测试*/
z-index:1000;
}

Buat lapisan topeng secara dinamik melalui JavaScript dan tambahkannya pada halaman:

//创建遮罩层节点
var oMask = document.createElement('div');
oMask.id = 'mask';
oMask.style.width = pageWidth + 'px';
oMask.style.height = pageHeight + 'px';
document.body.appendChild(oMask);

Lebar halaman dan pageHeight dalam kod di atas akan menjadi nilai lebar dan ketinggian halaman, melalui

//获取页面的高度和宽度
var pageHeight = document.documentElement.scrollHeight;
var pageWidth = document.documentElement.scrollWidth;

Dapatkan. Ini melengkapkan lapisan topeng.

Mari kita bincangkan tentang kesan lapisan pop timbul.

Lapisan pop timbul dipaparkan di bahagian tengah halaman (ini juga merupakan langkah utama), iaitu, jarak antara lapisan pop timbul dan bahagian kiri dan kanan halaman adalah sama, dan jarak dari bahagian atas dan bawah halaman adalah sama. Ambil perhatian bahawa ia berada di kawasan tetapi.

　

Formula yang dinyatakan ialah:

kiri=kanan=(Halaman boleh menjadi lebar kawasan - lebar lapisan pop timbul)/2; -lapisan atas)/2

Lebar kawasan di sini adalah sama dengan lebar halaman, kerana terdapat bar skrol di bahagian bawah halaman. Halaman web dengan bar skrol di bahagian bawah juga pelik. Ia mesti telah ditambahkan pada halaman sebelum menetapkan nilai kiri dan atasnya, jika tidak, ia tidak boleh ditetapkan.

oLogin.style.left = (pageWidth - loginWidth) / 2 + 'px';
oLogin.style.top = ( clientHeight- loginHeight) / 2 + 'px';

Skrip Laman Utama ingin mengingatkan semua orang bahawa kaedah penentududukan lapisan pop timbul di sini adalah tetap dan nilai indeks-znya lebih besar daripada nilai lapisan topeng.

#login{position:fixed;width:400px;height:400px;background:#fff;z-index: 1001;}

Langkah terakhir ialah menambah fungsi tindak balas acara pada butang tutup.

EventUtil.addHandler(oClose, 'click', function(){
document.body.removeChild(oMask);
document.body.removeChild(oLogin);
});

EventUtil ialah objek yang ditulis agar serasi dengan fungsi pemprosesan acara penyemak imbas Pelaksanaan khusus ada di sini:

var EventUtil = {
//添加事件处理函数
addHandler: function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvent('on' + type, handler);
}else{
element['on' + type] = handler;
}
},
//删除事件处理函数
removeHandler: function(element, type, handler){
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent('on' + type, handler);
}else{
element['on' + type] = null;
}
}
};

Kebanyakan kandungan dilengkapkan di sini Sebenarnya, ia sangat mudah dalam realiti. Selagi anda tahu prinsip, selebihnya adalah pelaksanaan.

Saya tidak akan memperkenalkan fungsi mengklik butang log masuk Hanya menambah fungsi pemprosesan acara.

Kod sumber (tidak diseragamkan):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>遮罩层效果</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background: #ccc;font-family: "微软雅黑";height:2000px;/*用于测试*/}
.clearfix:after,
.clearfix:before{content: "";display: block;}
.clearfix{clear: both;visibility: hidden;}
img{border: 0;}
#header{width:100%;height:60px;line-height:60px;background: #000;}
#header a{display: block;width:60px;height:60px;color:#fff;text-decoration: none;font-size:15px;background:#c9394a;text-align: center;float: right;margin-right:138px;}
#login{position:fixed;width:400px;height:400px;background:#fff;z-index: 1001;}
.title{height:50px;background: #c9394a;line-height: 50px;}
.title span{display:inline-block;color:#fff;padding-left:20px;}
.title a{display: block;float:right;background: url(close.png) no-repeat center;width: 30px;height:30px;padding:20px 20px 0 0;}
.login_content form{padding-top:40px;width:340px;margin: 0 auto;}
.inp_group{margin-bottom:30px;}
#username{
background: url(sprite.png) no-repeat 0 0;
}
#passwd{
background: url(sprite.png) no-repeat 0 -46px;
}
input[type=password],input[type="text"]{
width:272px;height:40px;
outline: none;
padding-left:48px;
border: 1px solid #000;
font-size:15px;
}
input[type=button]{
width:318px;
height:38px;
margin:0 auto;
border:1px solid #f00000;
background-color:#f00000;
color:#fff;
font-size:15px;
outline:none;
cursor:pointer;
transition:all 1s;
}
input[type=button]:hover{
background:#ff0000;
border:1px solid #ff0000;
}
#mask{
background: #000;
opacity: .6;
filter:alpha(opacity=60);
position:absolute;
left:0;
top:0;
width:100%;
height:1000px;/*动态获取，这里设置高度是为了测试*/
z-index:1000;
}
</style>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript">
function popLogin(){
//获取页面的高度和宽度
var pageHeight = document.documentElement.scrollHeight;
var pageWidth = document.documentElement.scrollWidth;
//可视区域的高度和宽度
var clientHeight = document.documentElement.clientHeight;

//创建遮罩层节点
var oMask = document.createElement('div');
oMask.id = 'mask';
oMask.style.width = pageWidth + 'px';
oMask.style.height = pageHeight + 'px';
document.body.appendChild(oMask);
//创建登录节点
var oLogin = document.createElement('div');
oLogin.id = 'login';
oLogin.innerHTML = '<div class="title"><span>登录</span><a href="javascript:;" id="close"></a></div><div class="login_content"><form method="post" action="&#63;"><div class="inp_group"><input type="text" name="username" id="username" placeholder="请输入登录邮箱"></div><div class="inp_group"><input type="password" name="password" id="passwd" placeholder="请输入密码"></div><input type="button" value="登录"></form></div>';
document.body.appendChild(oLogin);
var loginWidth = oLogin.offsetWidth;
var loginHeight = oLogin.offsetHeight;
console.log(clientHeight);
oLogin.style.left = (pageWidth - loginWidth) / 2 + 'px';
oLogin.style.top = ( clientHeight- loginHeight) / 2 + 'px';
var oClose = document.getElementById('close');
EventUtil.addHandler(oClose, 'click', function(){
document.body.removeChild(oMask);
document.body.removeChild(oLogin);
});
EventUtil.addHandler(oMask, 'click', function(){
document.body.removeChild(oMask);
document.body.removeChild(oLogin);
});
}
window.onload = function(){
var oLoginBtn = document.getElementById('login_btn');
EventUtil.addHandler(oLoginBtn, "click", popLogin);
};
</script>
</head>
<body>
<div id="header">
<a href="javascript:;" id="login_btn">登录</a>
</div>
<!--<div id="mask"></div>-->
<!--<div id="login">
<div class="title">
<span>登录</span>
<a href="javascript:;"></a>
</div>
<div class="login_content">
<form method="post" action="&#63;">
<div class="inp_group">
<input type="text" name="username" id="username" placeholder="请输入登录邮箱">
</div>
<div class="inp_group">
<input type="password" name="password" id="passwd" placeholder="请输入密码">
</div>
<input type="button" value="登录">
</form>
</div>
</div>-->
</body>
</html>

Kod ini berakhir di sini. Artikel ini tidak ditulis dengan baik. Pada masa yang sama, saya ingin mengucapkan terima kasih kepada semua orang atas sokongan berterusan anda terhadap tapak web Script Between Di sini, editor Script House mengucapkan selamat Tahun Baru kepada semua.