JS를 사용하여 DIV를 팝업하고 전체 페이지 배경을 어둡게 만드는 방법

이번에는 JS를 사용하여 DIV를 띄우고 전체 페이지의 배경을 어둡게 만드는 방법을 보여드리겠습니다. JS를 사용하여 DIV를 띄우고 전체 페이지의 배경을 어둡게 만드는 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

1 먼저 마스크 레이어 p를 작성하고 팝업창 p를 작성합니다.

<!-- 遮罩层 -->
<p id="cover" style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2 ">
  
</p>
<!-- 弹窗 -->
<p id="showp" style="width: 80%; margin: 0 auto; height: 9.5rem; border: 1px solid #999; display: none; position: absolute; top: 40%; left: 10%; z-index: 3; background: #fff">
  <!-- 标题 -->
  <p style="background: #F8F7F7; width: 100%; height: 2rem; font-size: 0.65rem; line-height: 2rem; border: 1px solid #999; text-align: center;" >
    提示
  </p>
  <!-- 内容 -->
  <p style="text-indent: 50px; height: 4rem; font-size: 0.5rem; padding: 0.5rem; line-height: 1rem; ">
    js弹窗 js弹出p,并使整个页面背景变暗</p>
  <!-- 按钮 -->
  <p style="background: #418BCA; width: 80%; margin: 0 auto; height: 1.5rem; line-height: 1.5rem; text-align: center;color: #fff;margin-top: 1rem; -moz-border-radius: .128rem; -webkit-border-radius: .128rem; border-radius: .128rem;font-size: .59733rem;" onclick="closeWindow()">
    确 定
  </p>
</p>

js 코드: (jq 소개)

<script type="text/javascript">
  // 弹窗
  function showWindow() {
    $('#showp').show();  //显示弹窗
    $('#cover').css('display','block'); //显示遮罩层
    $('#cover').css('height',document.body.clientHeight+'px'); //设置遮罩层的高度为当前页面高度
  }
  // 关闭弹窗
  function closeWindow() {
    $('#showp').hide();  //隐藏弹窗
    $('#cover').css('display','none');   //显示遮罩层
  }
</script>

Effect:

케이스를 읽으신 후 마스터하셨으리라 믿습니다. 더 흥미로운 방법을 알아보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!

추천 자료:

JS 호출 모드를 사용하여 이 키워드를 바인딩하는 방법

필터 사용자 정의 필터를 사용하여 AngularJS를 작동하여 ng-repeat 중복 제거를 제어하는 ​​방법

위 내용은 JS를 사용하여 DIV를 팝업하고 전체 페이지 배경을 어둡게 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!