JQuery封装一个蒙层插件
(function($){
$.extend({
dialog:function(obj) {
//title 标题
//content 内容
//cancel true|false 是否显示取消按钮
//success 点击确定的回调函数
obj.title = obj.title || "提示";
//蒙层
var modal = $("<div class='modal'></div>");
var body = $("<div class='modal-body'></div>");
var title = $("<p class='title'></p>").html(obj.title);
var content = $("<div class='content'></div>").html(obj.content);
var option = $("<div class='option'><button>确定</button><button class='cancel'>取消</button></div>");
if(!obj.cancel) {
option.find('button:last').remove();
}
option.find('button').click(function(){
if($(this).index()==0) {
if(obj.success) {
obj.success();
}
}
$('.modal').remove();
$('.modal-body').remove();
})
body.append(title).append(content).append(option);
//将蒙层和提示信息插入到页面body中
$('body').append(modal).append(body);
}
})
})(jQuery);
.modal {
width: 100%;
height: 100%;
background-color: #333;
opacity: 0.4;
position: absolute;
z-index: 9;
left: 0;
top: 0;
}
.modal-body {
width: 250px;
height: 150px;
background-color: #fff;
position: absolute;
z-index: 10;
left: 40%;
margin-top: 200px;
border-radius: 5px;
border: 1px solid #bebebe;
text-align: center;
}
.title {
margin: 0;
height: 40px;
line-height: 40px;
font-size: 20px;
}
.content {
margin: 10px;
font-size: 14px;
}
.option button {
margin-right: 20px;
background-color: #fff;
border: 1px solid transparent;
height: 30px;
width: 80px;
color: #fff;
background-color: #337ab7;
}
.cancel {
background-color: #d9534f !important;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<link rel="stylesheet" href="js/jqueryDialog/jquery.dialog.css">
<script src="js/jquery-1.11.3.js"></script>
<script src='js/jqueryDialog/jquery.dialog.js'></script>
<script>
$(function() {
$('.btn').click(function() {
$.dialog({
title:'用户提示',
content:"您确定要删除当前选择的用户类型么?",
cancel:true,
success:function() {
alert('点击确定处理的事件');
}
});
})
})
</script>
<style>
</style>
</head>
<body>
<button class="btn">
弹出框
</button>
</body>
</html>
- 上一篇 »Jquery 实现层的拖动，支持回调函数
- 下一篇 »jQuery自定义插件