ホームページ > 記事 > ウェブフロントエンド > jQuery はボタンをクリックしてマスク レイヤーをポップアップし、コンテンツを特殊効果_jquery で中央に配置します。
jQuery はボタンをクリックしてマスク レイヤーをポップアップし、コンテンツを特殊効果_jquery で中央に配置します。
- WBOYオリジナル
- 2016-05-16 15:25:591142ブラウズ
この記事では、ボタンをクリックしてマスク レイヤーをポップアップし、コンテンツを中央に配置するという 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実行時にポップアップを設定するのではなく、ポップアップレイヤーの背景サイズとページの上下の間隔を動的に設定する関数が実行されます。レイヤーパラメータが最初にロードされます。
上記はこの記事の全内容であり、ボタンをクリックしてマスク レイヤーをポップアップし、コンテンツを中央に配置する効果を実現する方法を説明しています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。