jQuery はボタンをクリックしてマスクレイヤーをポップアップし、コンテンツを特殊効果

jQuery はボタンをクリックしてマスクレイヤーをポップアップし、コンテンツを特殊効果_jquery で中央に配置します。

WBOY

リリース： 2016-05-16 15:25:59

オリジナル

1183 人が閲覧しました

この記事では、ボタンをクリックしてマスクレイヤーをポップアップし、コンテンツを中央に配置するという jQuery の特殊効果を紹介します。

テストプログラムなので閉じるボタンは追加していません。
1. メインプログラム

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>弹出居中遮罩</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="stylesheet" type="text/css" href="css/layout.css"/>
 </head>
 <body>
  <section class="test">
   这里是主体内容<br />
  <input type="button" class="testButton" value="弹出遮罩" />
  </section>
  <section class="testBg">
   <section class="testCont">
    这里是弹出的内容测试
   </section>
  </section>
  <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/layout.js" type="text/javascript" charset="utf-8"></script>
 </body>
</html>

ログイン後にコピー

2. CSS スタイル

*{
 margin: 0;
 padding: 0;
}
.testBg{
 position: absolute;
 top: 0;
 background-color: #000;
 filter:alpha(opacity=80); /* IE */ 
 -moz-opacity:0.8; /* Moz + FF */ 
 opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
 display:none ;     
}
.testBg .testCont{
 position: absolute;
 top: 0;
 left: 0;
 width:200px;
 border: 1px #ffc700 solid;
 color: #ffc700;
}

ログイン後にコピー

3. JS プログラム
これがこのエッセイの焦点です。間違った JS プログラムを見てみましょう。

$(function(){
 $(".testBg").height($(window).height()).width($(window).width()); //使遮罩的背景覆盖整个页面
 var testContTop=($(window).height()-$(".testCont").height())/2;  //计算弹出的框距离页面顶部的距离
 var testContWidth=($(window).width()-$(".testCont").width())/2;   //计算弹出的框距离页面左边的距离
 $(".testCont").css({
  "top":testContTop,
  "left":testContWidth
 });
 $(".testButton").click(function(){
  $(".testBg").show();
 }) 
})

ログイン後にコピー

上記のプログラムは問題ないようなので、出力を見てみましょう:

実測では上下の間隔がばらつきます。

正しい JS プログラムは次のとおりです:

$(function(){
 $(".testBg").height($(window).height()).width($(window).width());//使遮罩的背景覆盖整个页面
 
 $(".testButton").click(function(){
  $(".testBg").show();
  showDiv();
 }) 
})
function showDiv(){
  
 var testContTop=($(window).height()-$(".testCont").height())/2; //计算弹出的框距离页面顶部的距离
 var testContWidth=($(window).width()-$(".testCont").width())/2; //计算弹出的框距离页面左边的距离
 $(".testCont").css({
  "top":testContTop,
  "left":testContWidth
 });
}

ログイン後にコピー

上記のプログラムから分かるように、マスクレイヤーがポップアップした後、JS実行時にポップアップを設定するのではなく、ポップアップレイヤーの背景サイズとページの上下の間隔を動的に設定する関数が実行されます。レイヤーパラメータが最初にロードされます。

上記はこの記事の全内容であり、ボタンをクリックしてマスクレイヤーをポップアップし、コンテンツを中央に配置する効果を実現する方法を説明しています。