Comment faire apparaître un DIV et assombrir tout l'arrière-plan de la page à l'aide de JS

Cette fois, je vais vous montrer comment utiliser JS pour afficher un DIV et assombrir l'arrière-plan de la page entière. Quelles sont les précautions pour utiliser JS pour afficher un DIV et assombrir l'arrière-plan de. la page entière. Ce qui suit est un cas pratique.

1. Écrivez d'abord un calque de masque p, puis écrivez une fenêtre contextuelle 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>

Code js : (Introduire 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>

Effet :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le mode d'appel JS pour lier ce mot-clé

Comment faire fonctionner AngularJS à l'aide de Filter automatiquement Définir des filtres pour contrôler la déduplication ng-repeat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!