• jQuery带遮罩层弹窗实现(附源码)


    1、CSS样式

     1     <style type="text/css">
     2         body { font:11px/1.6em Microsoft Yahei; background:#fff; line-height:1.6em; outline:none;}
     3         html,body,div,ul,ol,li,p,iframe,h1,h2,dl,dt,dd { margin:0; padding:0;}
     4         .mask { width:100%; height:100%; background:rgba(0,0,0,0.6); display:none; position:fixed; _position:absolute; top:0; left:0; z-index:99;}
     5         .dialog { min-height:120px; background:#fff; display:none; position:fixed; top:8%; left:50%; z-index:100; box-shadow:3px 3px 5px #000;}
     6         .dialog a.close { display:block; width:22px; height:22px; background:url(images/close.png) center no-repeat #fff; text-indent:-9999em;}
     7         .dialog a.close { position:absolute; top:0; right:0; z-index:101;}
     8         .dialog.loading { background:url(images/loading.gif) center no-repeat #fff;}
     9         .dialog-content { padding:22px 10px 10px 10px;}
    10     </style>
    View Code

    2、HTML代码

    1     <div class="mask"></div>
    2     <div class="dialog">
    3         <a href="javascript:void(0)" class="close" title="关闭">关闭</a>
    4         <div class="dialog-content"></div>
    5     </div>
    View Code

    3、Javascript

     1     <script type="text/javascript">
     2         $(function () {
     3             $('.dialog').find('a.close').bind("click", function () {
     4                 Dialog.close();
     5             });
     6         });
     7 
     8         var Dialog = {
     9             mask: $('.mask'),
    10             dialog: $('.dialog'),
    11             content: $('.dialog-content'),
    12             open: function (width, height, appendHtml) {
    13                 Dialog.mask.fadeIn(500);
    14                 Dialog.dialog.css({  width, height: (height + 22), marginLeft: -(parseInt(width) / 2) }).addClass('loading').fadeIn(500, function () {
    15                     Dialog.dialog.removeClass('loading');
    16                     Dialog.content.append(appendHtml);
    17                 });
    18             },
    19             close: function () {
    20                 Dialog.mask.fadeOut(500);
    21                 Dialog.dialog.fadeOut(500, function () {
    22                     Dialog.content.empty();
    23                 });
    24             }
    25         }
    26     </script>

     4、预览效果

    下载地址:https://files.cnblogs.com/wyguo/jquery_dialog.zip

    作者:Wuyeguo

    声明:欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    Apache 配置多站点访问「为项目分配二级域名」
    php封装的mysqli类完整实例
    PHP实现链式操作的三种方法详解
    php实现简单链式操作mysql数据库类
    PHP PDO_MYSQL 链式操作 非链式操作类
    23个数据库常用查询语句
    微信小程序表单弹窗实例
    ES6 && ECMAScript2015 新特性
    ES6新语法概览
    sql将两个日期之间的日子全列出来
  • 原文地址:https://www.cnblogs.com/wyguo/p/3635380.html
Copyright © 2020-2023  润新知