JS 작업 페이지 배경이 어두워집니다.

이번에는 JS 작업 페이지의 배경을 어둡게 하는 방법을 알려드리겠습니다. JS 작업 페이지의 배경을 어둡게 할 때 주의할 점은 무엇인가요? 다음은 실제 사례입니다.

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

<!-- 遮罩层 -->
<p>
  
</p>
<!-- 弹窗 -->
<p>
  <!-- 标题 -->
  </p><p>
    提示
  </p>
  <!-- 内容 -->
  <p>
    js弹窗 js弹出p,并使整个页面背景变暗</p>
  <!-- 按钮 -->
  <p>
    确 定
  </p>

js 코드: (jq 소개)

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

Effect:

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

추천 자료:

vue는 모바일에서 스크롤 막대 이벤트를 트리거합니다.

슬라이딩 페이지 하단에서 무한 로딩 데이터 요구 사항을 만드는 방법

위 내용은 JS 작업 페이지 배경이 어두워집니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!