html5+jquery实现dialog功能

来源：互联网发布：淘宝海外购身份证水印编辑：程序博客网时间：2024/06/08 18:19

自己设计Web Dialog。
1.设计弹出框的样式。（所有的css都是以style形式写入）
//用于覆盖底层的页面，叠放的层次要小于dialog的层次（z-index)
<div id="bgGray" style=" background-color: #000;position: fixed;top: 0;left: 0;width: 100%;height: 100%;opacity: 0.5;display: none;z-index:99;"></div>
//dialog
<div style="width: 450px;height: 250px;position: absolute;top: 200px;left: 50%;z-index: 100;transform: translateX(-50%);display:none;" id="pratice">
<div class="dialog_head" style="height: 40px;background-color: #22b1a4;color: #FFF;font-size: 18px;padding: 7px;border-top-left-radius: 7px;border-top-right-radius: 7px;"></div>
<div style="height: 160px;display: table-cell;background-color:#FFF;vertical-align: middle;text-align: center;" class="dialog_body"><span style="font-size: 18px;float: left;text-align: center;width: 450px;"></span></div>
<div class="btnBox" style="background-color: #ccc;text-align: center;padding-top: 8px;height:50px;">
<botton class="yes btn btn-primary" style="width:80px;">确定</botton>
<botton style="margin-left:15px;width:80px;" class="no btn btn-default">取消</botton>
</div>
</div>

2.dialog的弹出以及功能实现
function userDialog() {
//msg是dialog显示的主体信息，type可以设计几个不同的dialog或者为不同的功能加入不同的图标用
//okCallback是dialog确定按钮的点击事件，cancelCallback是dialog取消按钮的点击事件
this.confirmYesOrNo = function(msg, type, okCallback, cancelCallback) {
$("#pratice, #bgGray").fadeIn();
$("#pratice .dialog_head").html('提示');
$("#pratice .dialog_body span").html(msg);
$("#pratice .btn-primary").click(function(){
if (okCallback && typeof okCallback === 'function') {
okCallback();
//移除当前的confirm方法
$(this).unbind('click');
$("#pratice .btn-default").unbind('click');
}
$("#pratice, #bgGray").fadeOut();
});
$("#pratice .btn-default").click(function(){
//移除当前的confirm方法
if (cancelCallback && typeof cancelCallback === 'function') {
cancelCallback();
//移除当前的confirm方法
$("#pratice .btn-primary").unbind('click');
$(this).unbind('click');
}
$("#pratice, #bgGray").fadeOut();
})
}
}
var userDialog = new userDialog();

3.dialog的使用
userDialog.confirmYesOrNo('确定删除此用户么？', 'choose', function() {
alert(222);
}, function() {
alert("这是Dialog的取消事件！");
})

1 0