집 > 기사 > 웹 프론트엔드 > jquery는 간단하고 실용적인 팝업 레이어 효과를 구현합니다.

jquery는 간단하고 실용적인 팝업 레이어 효과를 구현합니다.

WBOY원래의: 2016-05-16 15:36:241222검색

이 기사의 예에서는 jquery를 사용하여 간단하고 실용적인 팝업 레이어 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

지금은 수정한 이 팝업 레이어가 여전히 마음에 들고, 프로젝트에서도 이 레이어를 사용합니다. 새로운 버전의 jquery 플러그인이 도입되었습니다. 상자와 텍스트를 직접 정의할 수 있어 매우 편리합니다. 이 JavaScript도 이 예에서 그 역할을 충분히 수행할 수 있기를 바랍니다. JS 학습에도 좋은 참고자료가 됩니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/jquery-simple-alert-style-demo/

구체적인 코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>弹出层</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<style>
.black_overlay{
 display: none;
 position: absolute;
 top: 0%;
 left: 0%;
 width: 100%;
 height: 100%;
 background-color: black;
 z-index:1001;
 -moz-opacity: 0.8;
 opacity:.80;
 filter: alpha(opacity=80);
}
.white_content {
 display: none;
 position: absolute;
 top: 10%;
 left: 10%;
 width: 80%;
 height: 80%;
 border: 16px solid lightblue;
 background-color: white;
 z-index:1002;
 overflow: auto;
}
.white_content_small {
 display: none;
 position: absolute;
 top: 20%;
 left: 30%;
 width: 40%;
 height: 50%;
 border: 16px solid lightblue;
 background-color: white;
 z-index:1002;
 overflow: auto;
}
</style>
<script type="text/javascript">
//弹出隐藏层
function ShowDiv(show_div,bg_div){
 document.getElementById(show_div).style.display='block';
 document.getElementById(bg_div).style.display='block' ;
 var bgdiv = document.getElementById(bg_div);
 bgdiv.style.width = document.body.scrollWidth; 
 // bgdiv.style.height = $(document).height();
 $("#"+bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
 document.getElementById(show_div).style.display='none';
 document.getElementById(bg_div).style.display='none';
};
</script>
</head>
<body>
<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />
<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay">
</div>
 <div id="MyDiv" class="white_content">
  <div style="text-align: right; cursor: default; height: 40px;">
   <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
  </div>
  目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。
 </div>
</body>
</html>

이 기사가 모든 사람의 jquery 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：jquery를 사용하여 확인란이 선택되었는지 확인하는 방법다음 기사：jquery를 사용하여 확인란이 선택되었는지 확인하는 방법

jquery는 간단하고 실용적인 팝업 레이어 효과를 구현합니다.

관련 기사