js实现弹出窗口、页面变成灰色并不可操作的例子分享

下面是详细讲解JS实现弹出窗口和页面变成灰色的步骤。

1.实现弹出窗口

首先，我们需要通过js调用html中的弹出窗口操作方法。可以用alert()函数或者confirm()函数来实现。

alert()函数是一种弹出对话框的方法，当你需要告诉用户一些信息时，可以使用这个函数。它只会弹出一个消息框，只包含指定的文本和一个确定按钮，用户需要点确定按钮才能取消弹出的窗口。以下是示例代码：

alert("Hello,World!"); //弹出一个消息框，包含“Hello,World!”文本

confirm()函数是另一种弹出对话框的方法，当你需要用户选择一个选项时，可以使用这个函数。它会弹出一个消息框，包含指定的文本、一个确定按钮和一个取消按钮。用户需要选择其中一个选项，才能取消弹出的窗口。以下是示例代码：

if(confirm("Are you sure?")) {
  //用户点击确定后执行的代码
} else {
  //用户点击取消后执行的代码
}

2.实现页面变灰

接下来，我们需要使用html和css来实现页面变灰。首先，我们需要在html中加入一个全屏幕的遮罩层。这个遮罩层需要设置一个z-index属性，使其位于其他元素的上层，覆盖整个页面。然后，我们需要设置这个遮罩层的背景颜色为半透明的灰色，通过这种方式模糊页面，当遮罩层显示时，用户无法操作页面上的任何元素。

以下是实现页面变灰的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Gray Out Page Demo</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style type="text/css">
    .overlay {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 999;
      background: rgba(0,0,0,0.5);
    }
    .overlay.show {
      display: block;
    }
  </style>
</head>
<body>
  <h1>Gray Out Page Demo</h1>
  <p>This is a demo.</p>
  <button id="showOverlayBtn">Show Overlay</button>
  <div class="overlay"></div>
  <script>
    $(document).ready(function() {
      $('#showOverlayBtn').click(function() {
        $('.overlay').toggleClass('show');
      });
    });
  </script>
</body>
</html>

以上代码中，我们定义了一个.css类overlay，这个类定义了遮罩层的样式。另外，我们还定义了一个.show类，这个类用来显示遮罩层。在script标签中，我们使用jQuery来绑定按钮的单击事件，当按钮被点击时，我们使用toggleClass()来切换.show类的状态，从而显示或隐藏遮罩层。这样，当用户单击按钮时，页面会变灰，而当用户再次单击按钮时，页面会恢复正常。

以上就是JS实现弹出窗口和页面变成灰色的攻略，希望可以帮到你。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现弹出窗口、页面变成灰色并不可操作的例子分享 - Python技术站