JQuery弹出窗口插件带透明遮罩层

姚华军

已于 2022-06-24 13:57:44 修改

阅读量1.7k

点赞数 1

分类专栏：前端相关文章标签： jquery 弹出窗口 pop 透明遮罩层

于 2020-02-07 16:10:22 首次发布

本文链接：https://blog.csdn.net/yhj_911/article/details/104211273

版权

前端相关专栏收录该内容

21 篇文章 0 订阅

订阅专栏

今天系统中用到了一个带蒙版的弹出窗口，找了一个JQuery的插件，用起来挺方便的，还不错，mark一下，顺便介绍给大家：

直接上代码吧
1、页面HTML文件

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>简单的jQuery弹出层插件带透明遮罩层</title>
    <link rel="stylesheet" href="css/jquery.popup.css" type="text/css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/jquery.popup.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".js__p_start, .js__p_another_start").simplePopup();
        });
    </script>
</head>
<body>
    <div class="p_anch"> <a href="#" class="js__p_start">点击我试试,</a> </div>
    <div class="p_body js__p_body js__fadeout"></div>
    <div class="popup js__popup js__slide_top">
        <a href="#" class="p_close js__p_close" title="Close"></a>
        <div class="p_content">
            <p>简单的弹出层插件Demo</p>
        </div>
    </div>
</body>

</html>

2、js文件

(function($) {
  $.fn.simplePopup = function() {
    var simplePopup = {

      initialize: function(self) {
        var popup = $(".js__popup");
        var body = $(".js__p_body");
        var close = $(".js__p_close");
        var hash = "#popup";
        var string = self[0].className;
        var name = string.replace("js__p_", "");

        if ( !(name === "start") ) {
          name = name.replace("_start", "_popup");
          popup = $(".js__" + name);
          name = name.replace("_", "-");
          hash = "#" + name;
        };

        self.on("click", function() {
          simplePopup.show(popup, body, hash);
          return false;
        });

        $(window).on("load", function() {
          simplePopup.hash(popup, body, hash);
        });

        body.on("click", function() {
          simplePopup.hide(popup, body);
        });

        close.on("click", function() {
          simplePopup.hide(popup, body);
          return false;
        });

        $(window).keyup(function(e) {
          if (e.keyCode === 27) {
            simplePopup.hide(popup, body);
          }
        });
      },

      centering: function(self) {
        var marginLeft = -self.width()/2;
        return self.css("margin-left", marginLeft);
      },

      show: function(popup, body, hash) {
        simplePopup.centering(popup);
        body.removeClass("js__fadeout");
        popup.removeClass("js__slide_top");
        window.location.hash = hash;
      },

      hide: function(popup, body) {
        popup.addClass("js__slide_top");
        body.addClass("js__fadeout");
        window.location.hash = "#";
      },

      hash: function(popup, body, hash) {
        if (window.location.hash === hash) {
          simplePopup.show(popup, body, hash);
        }
      }
    };

    return this.each(function() {
      var self = $(this);
      simplePopup.initialize(self);
    });

  };
})(jQuery);

3、css文件

.popup {
  position:fixed; z-index:2; top:60px; left:50%;
  width:760px; height:570px; background:#fff;
    -moz-box-shadow:4px 4px 30px #130507;
    -webkit-box-shadow:4px 4px 30px #130507;
  box-shadow:4px 4px 30px #130507;
    -moz-transition:top 800ms;
    -o-transition:top 800ms;
    -webkit-transition:top 800ms;
  transition:top 800ms;
}
  .p_content { width:100%; text-align:center; font-size:23px; padding:110px 0 0; }
  .p_anch {
    float:left; position:relative; z-index:1; width:100%;
    margin:80px 0 0 0; text-align:center; font-size:18px;
  }
  .p_anch a { color:#000; }
  .p_anch a:hover { text-decoration:none; }
  .p_anch_bottom { margin:1500px 0 0 0; padding:0 0 50px 0; }
  .p_close {
    float:right; width:15px; height:14px; margin:11px 10px 0 0;
    background:url(../img/popup_close.png);
  }
  .p_body {
    background:#000; left:0; top:0; position:fixed; width:100%; height:100%; opacity:0.7;
      -moz-transition:opacity 800ms;
      -o-transition:opacity 800ms;
      -webkit-transition:opacity 800ms;
    transition:opacity 800ms;
  }

.js__popup {}
  .js__p_start {}
  .js__p_close {}
  .js__p_body {}
  .js__slide_top { height:0; overflow:hidden; top:0; }
  .js__fadeout { height:0; overflow:hidden; opacity:0; }

4、关闭图片
在这里插入图片描述
5、最后的运行效果（带有蒙版的弹出框完成）

姚华军

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery弹出窗口插件带透明遮罩层

今天系统中用到了一个带蒙版的弹出窗口，找了一个JQuery的插件，用起来挺方便的，还不错，mark一下，顺便介绍给大家：直接上代码吧1、页面HTML文件<!DOCTYPE html><html lang="ru"><head> <meta charset="utf-8"> <title>简单的jQuery弹出层插......
复制链接

扫一扫