您的位置：首页 > Web前端 > JQuery

jQuery 自定义弹窗插件

2017-08-08 14:39 316 查看

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;">×</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;">×</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 描 述</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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 自定义弹窗 jquery弹窗弹窗

相关文章推荐

新的分享

章节导航