ホームページ > 記事 > ウェブフロントエンド > Javascript_javascript スキルに基づいてポップアップ ページ効果を実装する
ポップアップ レイヤー効果は、Baidu などの多くの Web サイトでこの方法を使用してログインと登録を実装する非常に実用的な機能です。
ポップアップ レイヤーの機能: ログインまたは登録をクリックすると、ログインまたは登録エリアがページの中央にポップアップ表示され、ページにはマスク レイヤーがあり、ログイン ボックスはマスク レイヤーの上にあります。ログイン ボックスの z-index 値は、マスク レイヤの z-index 値より大きくなければなりません。 [閉じる] または [マスク] レイヤーをクリックすると、ログイン ボックスまたは登録ボックスが閉じます (一部の Web ページでは、マスク レイヤーをクリックしてログイン エリアまたは登録エリアを閉じる機能が実装されていません)。
最近、同様のポップアップ レイヤー エフェクトを作成しました。最初に最終的なエフェクトを見てみましょう:
実装プロセスについて簡単に説明します。
最初はマスクレイヤーです。マスク レイヤーはページの動的読み込み中に作成されます。マスク レイヤーはページ全体を覆う必要があるため、マスク レイヤーの高さは JavaScript で計算され、その幅はページ全体の幅となります。簡単に入手できます。また、ページ全体をカバーする必要があるため、z-index 値をできるだけ大きく設定する必要があります。もちろん透明性も必須です。
#mask{ background: #000; opacity: .6; filter:alpha(opacity=60); position:absolute; left:0; top:0; width:100%; height:1000px;/*动态获取,这里设置高度是为了测试*/ z-index:1000; }
//创建遮罩层节点 var oMask = document.createElement('div'); oMask.id = 'mask'; oMask.style.width = pageWidth + 'px'; oMask.style.height = pageHeight + 'px'; document.body.appendChild(oMask);
を通じてページの幅と高さの値を決定します。
//获取页面的高度和宽度 var pageHeight = document.documentElement.scrollHeight; var pageWidth = document.documentElement.scrollWidth;
ポップアップレイヤーの効果について話しましょう。
ポップアップ レイヤーはページの中央部分に表示されます (これも重要な手順です)。つまり、ポップアップ レイヤーとページの左側と右側の間の距離は等しく、ページの上部と下部からの距離は等しい。 but 領域にあることに注意してください。
式で表されるのは次のとおりです:
left=right=(ページはエリアの幅 - ポップアップレイヤーの幅)/2; top=bottom=(ページはエリアの高さ - ポップアップの高さ)レイヤー)/2
ページの下部にスクロールバーがあるため、この領域の幅はページの幅と同じになります。 Web ページの下部にスクロール バーがあるのも奇妙です。左と上の値を設定する前にページに追加する必要があります。そうでない場合は設定できません。
oLogin.style.left = (pageWidth - loginWidth) / 2 + 'px'; oLogin.style.top = ( clientHeight- loginHeight) / 2 + 'px';
スクリプト ホームでは、ここでのポップアップ レイヤーの配置方法は固定されており、その Z インデックス値はマスク レイヤーの Z インデックス値よりも大きいことを皆さんに思い出していただきたいと思います。
#login{position:fixed;width:400px;height:400px;background:#fff;z-index: 1001;}
EventUtil.addHandler(oClose, 'click', function(){ document.body.removeChild(oMask); document.body.removeChild(oLogin); });
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; } } };
ログインボタンをクリックする機能は紹介しません。イベント処理関数を追加するだけです。
ソースコード (標準化されていない):
<!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="?"><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="?"> <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>