집 > 기사 > 웹 프론트엔드 > jQuery는 버튼을 클릭하여 마스크 레이어를 팝업하고 특수 효과를 사용하여 콘텐츠를 중앙에 배치합니다.

jQuery는 버튼을 클릭하여 마스크 레이어를 팝업하고 특수 효과를 사용하여 콘텐츠를 중앙에 배치합니다.

WBOY원래의: 2016-05-16 15:25:591143검색

이 기사에서는 버튼을 클릭하여 마스크 레이어를 표시하고 콘텐츠를 중앙에 배치하는 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 실행 시 팝업을 설정하는 대신 팝업 레이어의 배경 크기와 페이지 상단 및 왼쪽 간격을 동적으로 설정하는 함수가 실행됩니다. 레이어 매개변수가 먼저 로드됩니다.

위 내용은 이 기사의 전체 내용이며, 버튼을 클릭하여 마스크 레이어를 팝업하고 내용을 중앙에 배치하는 효과를 얻는 방법을 알려줍니다.

성명：

이전 기사：JavaScript 모듈 개발을 위한 SeaJS_javascript 기술다음 기사：JavaScript 모듈 개발을 위한 SeaJS_javascript 기술

jQuery는 버튼을 클릭하여 마스크 레이어를 팝업하고 특수 효과를 사용하여 콘텐츠를 중앙에 배치합니다.

관련 기사