制作一个弹出层或者弹窗提醒

最新推荐文章于 2023-10-22 15:43:28 发布

一剑落笙歌

最新推荐文章于 2023-10-22 15:43:28 发布

阅读量1.1k

点赞数 2

文章标签： javascript html

本文链接：https://blog.csdn.net/Gqiangqiang/article/details/104317151

版权

首页，我们需要先确定在提示框出现后，是否需要让底层页面不可操作;

如果对底层内容不做限制，则直接做一个弹出层即可
如果要让底层页面不可以操作，则需要一个蒙层来让用户操作不到底层页面

我们就直接做有蒙层的，没有蒙层的直接去掉就好了。
基础页面：

<!DOCTYPE html>
<html>
  <head><title>弹出层测试</title>
  <style>
      body {
          margin: 0;
          padding: 0;
      }
      img{
          position: absolute;
          top: 0px;
          width: 100%;
          height: 100%;
      }
      .mo {
          position: absolute;
          top: 0;
          width: 100%;/* 把整个页面都蒙上 或者不需要全蒙的，可以小一点 */
          height: 100%;
          background-color: aqua;
          z-index: 998; /* 弹出层一定要在其他内容图层之上 类似于窗口的置顶 数值越大 越靠上越是优先显示*/
          display: none; /* 首先把div隐藏 */
      }
      .pop {
          position: relative;
          display: none; /* 隐藏 */
          margin: 10% auto;
          width: 300px;
          height: 300px; /* 弹出层的宽高 */
          background-color: salmon;
          z-index: 999; /* 把真正的弹出层设置为最高图层 要比蒙层高 */
      }
      .btn{
        position: absolute;
      }
  </style>
  </head>
  <body>
      <div class="fd">
          <img src=".//img/bgi_river.jpg"/><!-- 用图片模拟其他所有内容 -->
          <button class="btn" id="setting">我是一个按钮</button><!-- 点击出现弹出层 -->
      </div>
      <div class="mo"></div><!-- 蒙层 不需要可以去掉-->
      <div class="pop">
          <span>这是弹出层</span>
      </div>
  </body>
</html>

这样之后我们需要js来协助我们(这里我使用了jQuery)

<script type="text/javascript" src="./js/jquery-3.4.1.js" ></script>
  <script>
      $(function(){
          $("#setting").click(function(){
              $(".mo").css("display", "block");/* 设置蒙层display为block，即div显示出来 */
              $(".pop").css("display", "block");/* 设置弹出层display为block，即div显示出来 */
          });
      }
  </script>

我们先把蒙层大小调整到60% (没有定位调整，所以在左上角)，然后没有被蒙层覆盖的地方就是可以操作的。
在这里插入图片描述

然后把蒙层大小调整为100%再来看看效果
在这里插入图片描述
这样大概就好了

再看关闭弹出层
其实很简单，把之前设置的display重新设置为none，就可以了
我在弹出层中加入一个按钮,js中加入函数

<div class="pop">
    <span>这是弹出层</span>
    <button id="setting_return">这又是一个按钮</button> <!-- 按钮要加在 -->
</div>

<script>
  $(function(){
    $("#setting_return").click(function(){
        $(".mo").css("display", "none");
        $(".pop").css("display", "none");
    });
  });
</script>

再看
在这里插入图片描述
需要美化的，在进行美化就好了，有其他内容的话，比如表单之类，可以放到弹出层内，同时在表单提交时让弹出层隐藏起来就可以了。
或者我们让蒙层透明，也就是可以看到底层内容，只要更改蒙层的opacity的值就可以了这里我改成了opacity:0.4
在这里插入图片描述
OK，搞定！！！

一剑落笙歌

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
制作一个弹出层或者弹窗提醒

首页，我们需要先确定在提示框出现后，是否需要让底层页面不可操作;如果对底层内容不做限制，则直接做一个弹出层即可如果要让底层页面不可以操作，则需要一个蒙层来让用户操作不到底层页面我们就直接做有蒙层的，没有蒙层的直接去掉就好了。基础页面：<!DOCTYPE html><html> <head><title>弹出层测试</titl...
复制链接

扫一扫