(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>