html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dialog Demo</title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/dialog.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/>
<link rel="stylesheet" type="text/css" href="css/dialog.css"/>
</head>
<body>
<div id="mask"></div>
</body>
<script type="text/javascript">
// 创建对话框
var dialog = new Dialog();
dialog.createDialog();
// 设置对话框标题
dialog.setTitle("提示");
// 设置对话框消息
dialog.setMessage("是否删除该图片?");
// 创建需要显示的按钮
var list = new Array();
var save = document.createElement("input");
save.type = "button";
save.setAttribute("class","btn");
save.value = " 保 存 ";
save.onclick = function() {
dialog.hideDialog();
}
list[list.length] = save;
// 设置对话框按钮
dialog.setButtons(list);
// 显示对话框
dialog.showDialog();
</script>
</html>
JavaScript
function Dialog() {
/**
* 创建对话框
*
*/
this.createDialog = function() {
var mask = document.getElementById("mask");
var dialog = document.createElement("div");
var title = document.createElement("div");
var body = document.createElement("div");
var foot = document.createElement("div");
dialog.id = "dialog";
title.id = "dialog-title";
body.id = "dialog-body";
foot.id = "dialog-foot";
dialog.appendChild(title);
dialog.appendChild(body);
dialog.appendChild(foot);
mask.appendChild(dialog);
}
/**
* 显示对话框
*/
this.showDialog = function() {
$('#mask').fadeIn("fast", function(){
$('#dialog').slideDown("fast");
});
}
/**
* 隐藏对话框
*/
this.hideDialog = function() {
$('#dialog').slideUp("fast",function(){
$('#mask').fadeOut("fast");
});
}
/**
* 设置标题显示内容
*/
this.setTitle = function(title) {
$('#dialog-title').html(title);
}
/**
* 设置消息显示内容
*/
this.setMessage = function(message) {
$('#dialog-body').html(message);
}
/**
* 添加按钮
* 默认会有一个关闭按钮
*
* @param {Object} objs
*/
this.setButtons = function(objs) {
var button = document.createElement("input");
button.type = "button";
button.setAttribute("class","btn");
button.value = " 确 认 ";
button.onclick = function() {
$('#dialog').slideUp("fast",function(){
$('#mask').fadeOut("fast");
});
}
if(undefined!=objs && null!=objs && objs.length>0) {
for (var i=0; i<objs.length; i++) {
$('#dialog-foot').append(objs[i]);
}
button.value = " 关 闭 ";
}
$('#dialog-foot').append(button);
}
}
CSS
*{
margin: 0px;
padding: 0px;
}
#mask {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 9997;
-moz-opacity: 0.7;
opacity: .70;
filter: alpha(opacity=70);
}
#dialog {
display: none;
position: relative;
top: 23px;
width: 53%;
min-height: 150px;
border: 3px solid #CCCCCC;
background-color: white;
z-index: 9998;
overflow: auto;
/* 水平居中 */
margin-left: auto;
margin-right: auto;
/*修改对话框的字体*/
font-family: "微软雅黑";
}
#dialog-title {
position: absolute;
height: 35px;
width: 100%;
top: 0px;
left: 0px;
font-size: 30px;
font-weight: normal;
background-color: #CCCCCC;
padding-top: 7px;
}
#dialog-foot {
background-color: #CCCCCC;
position: absolute;
height: 32px;
width: 100%;
bottom: 0px;
right: 0px;
padding-top: 3px;
text-align: right;
}
#dialog-body {
font-size: 15px;
padding-top: 60px;
padding-left: 23px;
padding-bottom: 30px;
}
#dialog-foot .btn {
margin-right: 10px;
}