对话框组件 弹窗组件
jrDialog.js
(function($){
$.extend({
jrDialog:function(options) {
this.options = $.extend({
content: "", // 内容
dialogType: 1, // 1：为 confirm 的自传内容 2：为成功或警告的提示
dialogTitle:"",
dialogStatus: 1, // dialogtype为2时 成功或警告，1：成功
modal: true, // 是否为模式，带遮罩层
closeOnEsc: true, //是否支持esc关闭对话框
yesCallBack: null // 点击确定按钮执行的回调
}, options);
this.creatDialog();
},
autoCenter:function(obj) {
if (!obj[0])return false;
var winHeight = $(window).height();
var winScrollTop = $(window).scrollTop();
var objH = obj.height();
var objW = obj.width();
//obj.css({"top": winScrollTop + Math.max(0, (winHeight - objH) / 2) + "px", "margin-left": -objW / 2 | 0 + "px"})
},
open:function(){
var _this = this;
if (_this.options.closeOnEsc) {
$(document).bind("keydown", function(e) {
if (e.keyCode == 27) {
_this.close();
}
});
}
$(".close,.btn-dialog-cancel,.btn-dialog-sure").click(function() {
_this.close();
});
$(".btn-dialog-confirm,.confirmBtn").click(function(){
if($.isFunction(_this.options.yesCallBack)){
_this.options.yesCallBack.call(_this,"1");
_this.close();
}
});
$(".btn-dialog-confirm,.confirmBtn1").click(function(){
if($.isFunction(_this.options.yesCallBack)){
_this.options.yesCallBack.call(_this,{}, _this.element);
}
});
return _this;
},
close:function(){
this.element.remove();
$(".mask").remove();
},
creatDialog:function(){
var $html = $(this.getDialogHtml().replace("{resultContent}",this.options.content).replace("{dialogTitle}",this.options.dialogTitle));
var mask;
mask = $('<div>').addClass("mask");
var _this = this;
mask.appendTo(document.body);
_this.element = $html.appendTo(document.body);
$html.slideDown();
$.autoCenter($html);
$.open();
},
getDialogHtml : function() {
var html = [];
if(this.options.dialogType == 2){
html = [
'<div class="jrDialog-2 jrDialog" id='+this.options.eleName+'>',
' <div class="jrDialogWrap">',
' <div class="paneltitle">',
' <span class="text">{dialogTitle}</span>',
' <span class="nwd_icon nwd_icon_close close"></span>',
' </div>',
' <div class="jrDialog-content pad_l20 pad_r20 pad_t20 pad_b20">{resultContent}</div>',
' </div>',
'</div>'
].join("");
return html;
}
}
});
})(jQuery);
调用
<link rel="stylesheet" type="text/css" href="css/jrDialog.css">
</head>
<body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jrDialog.js"></script>
<script type="text/javascript">
function evlBtnFun () {
$.jrDialog({
content: [
'<div class="evalResult">',
'<input type="text" value="" id="input">',
'<button class="btn-sm btn-l btn-1 confirmBtn1">确认</button>',
'</div>'
].join(""),
dialogTitle:"",
dialogType: 2, //
dialogStatus: 1, //
eleName : 'Dio1',
yesCallBack : function (a,b) {
console.log($("#input").val());
b.remove();
$(".mask").remove()
}
})
}
evlBtnFun()
</script>
浙公网安备 33010602011771号