jQuery 自定义弹窗插件

最新推荐文章于 2024-06-12 16:19:00 发布

i0vv0i

最新推荐文章于 2024-06-12 16:19:00 发布

阅读量943

点赞数

分类专栏： ThinpPHP 文章标签：自定义弹窗 jquery弹窗弹窗

本文链接：https://blog.csdn.net/qq_37780279/article/details/76906351

版权

ThinpPHP 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jquery自定义弹窗插件

(function () {
    $.fn.alert = function (e) {     var fn = this;      $(fn).show();
        $('body').append('<i class="_mask" style="position: fixed;width: 100%;height: 100%;left: 0;top: 0;background-color:rgba(33,33,33,.8);z-index:998;"></i>');
        $(fn).find('i.OFF').is('.OFF')?'':$(fn).append('<i class="OFF" style="cursor:pointer;display:inline-block;font-style:normal;color:#ff0;position:absolute;top:0;right:0;">&times;</i>');
        $(this).css({
            'display': 'block', 'min-width':' 300px', 'min-height': '200px', 'position':'fixed', 'left':'50%', 'top': '50%','z-index':'999',
            'border': '1px solid rgba(111,111,111,.3)', '-webkit-transform': 'translate(-50%,-50%)', '-moz-transform': 'translate(-50%,-50%)',
            '-ms-transform': 'translate(-50%,-50%)', '-o-transform':'translate(-50%,-50%)', 'transform':'translate(-50%,-50%)'
        });
        var BUT = ['YES','yes','Yes','OK','ok','Ok','NO','No','no'];  //点击有返回，执行下一步，关闭当前窗口  返回值是当前点击按的class名字  //根据需要给变量添加字符，弹窗上添加删除 可以添加del等
        var OFF  = ['Off','off','OFF'];                               //点击无返回，直接退出      建议不要用OFF名字，用了后将没有右上角的×  //变量中可以根据需要修改，保留自己需要的

        for(var i in BUT){ $(this).find('.'+BUT[i]).off('click'); } for(var i in OFF){ $(this).find('.'+OFF[i]).off('click'); }    //清除点击事件【防重复点击】;
        for(var i in BUT){ $(this).find('.'+BUT[i]).one("click",function(){ $('i._mask').remove(); if(typeof(e) == 'function'){ e($(this).attr('class')); } return $(fn).hide(); }); }
        for(var i in OFF){ $(this).find('.'+OFF[i]).one("click",function(){ $('i._mask').remove(); return $(fn).hide(); }); }
    }
})(jQuery);

jquery 自定义弹窗的使用方法

写好弹窗样式,用jquery的Dom节点使用插件,【注意需要在节点的html处设置display:none样式】

完整案例【注意引入正确的jquery】

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery 简单自定义弹窗</title>
    <script src="jquery-3.2.1.min.js"></script>       <!--请引入正确jquery-->
<script>    /*----------------------------------------jquery 自定义封装-------------------------------------------*/
(function () {
    $.fn.alert = function (e) {     var fn = this;      $(fn).show();
        $('body').append('<i class="_mask" style="position: fixed;width: 100%;height: 100%;left: 0;top: 0;background-color:rgba(33,33,33,.8);z-index:998;"></i>');
        $(fn).find('i.OFF').is('.OFF')?'':$(fn).append('<i class="OFF" style="cursor:pointer;display:inline-block;font-style:normal;color:#ff0;position:absolute;top:0;right:0;">&times;</i>');
        $(this).css({
            'display': 'block', 'min-width':' 300px', 'min-height': '200px', 'position':'fixed', 'left':'50%', 'top': '50%','z-index':'999',
            'border': '1px solid rgba(111,111,111,.3)', '-webkit-transform': 'translate(-50%,-50%)', '-moz-transform': 'translate(-50%,-50%)',
            '-ms-transform': 'translate(-50%,-50%)', '-o-transform':'translate(-50%,-50%)', 'transform':'translate(-50%,-50%)'
        });
        var BUT = ['YES','yes','Yes','OK','ok','Ok','NO','No','no'];  //点击有返回，执行下一步，关闭当前窗口  返回值是当前点击按的class名字  //根据需要给变量添加字符，弹窗上添加删除 可以添加del等
        var OFF  = ['Off','off','OFF'];                               //点击无返回，直接退出      建议不要用OFF名字，用了后将没有右上角的×  //变量中可以根据需要修改，保留自己需要的

        for(var i in BUT){ $(this).find('.'+BUT[i]).off('click'); } for(var i in OFF){ $(this).find('.'+OFF[i]).off('click'); }    //清除点击事件【防重复点击】;
        for(var i in BUT){ $(this).find('.'+BUT[i]).one("click",function(){ $('i._mask').remove(); if(typeof(e) == 'function'){ e($(this).attr('class')); } return $(fn).hide(); }); }
        for(var i in OFF){ $(this).find('.'+OFF[i]).one("click",function(){ $('i._mask').remove(); return $(fn).hide(); }); }
    }
})(jQuery);
</script>
</head>
<body style="background-color:rgba(66,66,66,.6);">      <!------------------------------------例子HTML与css-------------------------------------------->
    <style>
        * {  margin: 0;  padding: 0;  }  i {  font-style: normal;  }
        .alert {  display: none;  width: 600px;  background-color: rgba(255, 255, 255, 0.5);  padding: 10px;  border: 1px solid #000;  }
        .alert li {  cursor: pointer;  width: 100%;  clear: both;  display: flex;  margin-bottom: 3px;  font-size: 20px;  }
        .alert li > * {  display: block;  border: none;  background: none;  }
        .alert input, .alert textarea {  width: 100%;  resize: none;  border: 1px solid rgba(33, 33, 33, 0.3);  font-family: 楷体;  font-size: 20px; }
        .alert li > *:first-child:not(h1) {  width: 150px;  }
        .alert li > *:nth-of-type(2) {  flex: 1 1 100%;  }
        .alert h1 {  width: 100%;  text-align: center;  border-bottom: 1px solid rgba(11, 11, 11, 0.1);  }
        .alert span {  display: block;  width: 100%;  margin-top: 30px;  text-align: center;  }
        .alert button {  display: inline;  width: 100px;  padding: 5px 10px;  cursor: pointer;  text-align: center;  }
    </style>
    <ul><li>点击1</li><li>点击2</li><li>点击3</li></ul>
    <div class="alert">
        <ol>
            <li><h1>栏目信息修改</h1></li>
            <li><i>id</i><input name="id" type="text" disabled></li>
            <li><i>pid</i><input name="pid" type="text"></li>
            <li><i>栏目中文名</i><input name="title" type="text"></li>
            <li><i>栏目英文名</i><input name="name" type="text"></li>
            <li><i>SEO 关键字</i><textarea name="keyword" rows="3"></textarea></li>
            <li><i>SEO 描&nbsp;述</i><textarea name="describe" rows="3"></textarea></li>
        </ol>
        <span>
                <button class="yes">修改</button>
                <button class="NO">删除</button>
                <button class="off">取消</button>
        </span>
    </div>
</body>
</html>

<script>
    $(function () {
        $('ul li').click(function () {  var fn = this;
            $('.alert').alert(function (e) {  alert(e);  });   //$('.jquery_alert').alert();   //点击了确认后执行内部函数
        });
    });
</script>

i0vv0i

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery 自定义弹窗插件

jquery自定义弹窗插件(function () { $.fn.alert = function (e) { var fn = this; $(fn).show(); $('body').append(''); $(fn).find('i.OFF').is('.OFF')?'':$(fn).append('&times
复制链接

扫一扫