<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../js/bootstrap-typeahead.js" type="text/javascript"></script>
<link href="../css/bootstrap.min.css" rel="stylesheet"/>
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
<script src="../js/bootstrap-select.js" type="text/javascript"></script>
<link href="../css/bootstrap-select.min.css" rel="stylesheet"/>
<script type="text/javascript">
/*
用途描述：自定义的消息提示框和消息确认框，采用jquery的闭包方法实现，但必须依赖
与jQuery，否则没有效果。
使用说明：
alert框请调用：zdalert(title,top,width, message, function(ret))
confirm框请调用：zdconfirm(title,top,width, message, function(ret))
方法参数说明：
title：弹出框的显示标题；
top：弹出框位于当前窗体的高度，请填写整数值，使用的分数形式(_height - boxHeight) / top
width：弹出框的宽度，请填写px值。
message：弹出框显示的内容。
function：回调函数，需要执行的内容方法，参数ret有一个，为ture和false值*/
(function($) {
//声明闭包方法
$.alerts = {
alert: function(title,top,width, message, callback) {
if( title == null ) title = \'Alert\';
$.alerts._show(title,top,width, message, null, \'alert\', function() {
if( callback ) callback(result);
});
},
confirm: function(title, top,width,message, callback) {
if( title == null ) title = \'Confirm\';
$.alerts._show(title, top,width,message, null, \'confirm\', function(result) {
if( callback ) callback(result);
});
},
_show: function(title,top,width,msg, value, type, callback) {
var _html = "";
_html += \'<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">\' + title + \'</span>\';
_html += \'<div id="mb_msg">\' + msg + \'</div><div id="mb_btnbox">\';
if (type == "alert") {
_html += \'<input id="mb_btn_ok" type="button" value="确定" />\';
}
if (type == "confirm") {
_html += \'<input id="mb_btn_ok" type="button" value="确定" />\';
_html += \'<input id="mb_btn_no" type="button" value="取消" />\';
}
_html += \'</div></div>\';
//必须先将_html添加到body，再设置Css样式
$("body").append(_html); GenerateCss(top,width);
//判断是确认框还是提示框
switch( type ) {
case \'alert\':
$("#mb_btn_ok").click( function() {
$.alerts._hide();
callback(true);
});
$("#mb_btn_ok").focus().keypress( function(e) {
if( e.keyCode == 13 || e.keyCode == 27 ) $("#mb_btn_ok").trigger(\'click\');
});
break;
case \'confirm\':
$("#mb_btn_ok").click( function() {
$.alerts._hide();
if( callback ) callback(true);
});
$("#mb_btn_no").click( function() {
$.alerts._hide();
if( callback ) callback(false);
});
$("#mb_btn_no").focus();
//键盘的按键快捷键
$("#mb_btn_ok, #mb_btn_no").keypress( function(e) {
//enter键
if( e.keyCode == 13 ) {$("#mb_btn_ok").trigger(\'click\');}
//esc键
if( e.keyCode == 27 ){ $("#mb_btn_no").trigger(\'click\');}
});
break;
}
},
_hide: function() {
$("#mb_box,#mb_con").remove();
}
}
// 显示提示框,top,width:top窗体位置当前窗口的高低的百分比，必须填写整数；width窗体显示的宽度。
zdalert = function(title,top,width, message, callback) {
$.alerts.alert(title,top,width, message, callback);
}
//显示确认框,top,width:top窗体位置当前窗口的高低的百分比，必须填写整数；width窗体显示的宽度。
zdconfirm = function(title,top,width, message, callback) {
$.alerts.confirm(title,top,width, message, callback);
};
//生成Css
var GenerateCss = function (top,width) {
$("#mb_box").css({ width: \'100%\', height: \'100%\', zIndex: \'99999\', position: \'fixed\',
filter: \'Alpha(opacity=60)\', backgroundColor: \'black\', top: \'0\', left: \'0\', opacity: \'0.6\'
});
/*$("#mb_con").css({ zIndex: \'999999\', width: \'350px\', position: \'fixed\',
backgroundColor: \'White\', borderRadius: \'15px\'
});*/
//去掉边框的圆
$("#mb_con").css({ zIndex: \'999999\', width:width, position: \'fixed\',
backgroundColor: \'White\'
});
$("#mb_tit").css({ display: \'block\', fontSize: \'14px\', color: \'white\', padding: \'10px 15px\',
backgroundColor: \'#31B0D5\', borderRadius: \'0 0 0 0\',
borderBottom: \'3px solid #999\', fontWeight: \'bold\'
});
$("#mb_msg").css({ padding: \'20px\', lineHeight: \'20px\',
borderBottom: \'1px dashed #DDD\', fontSize: \'16px\',backgroundColor:\'#FCFCFC\'
});
$("#mb_ico").css({ display: \'block\', position: \'absolute\', right: \'10px\', top: \'9px\',
border: \'1px solid Gray\', width: \'18px\', height: \'18px\', textAlign: \'center\',
lineHeight: \'16px\', cursor: \'pointer\', borderRadius: \'12px\', fontFamily: \'微软雅黑\'
});
$("#mb_btnbox").css({ margin: \'15px 0 10px 0\', textAlign: \'center\' });
$("#mb_btn_ok,#mb_btn_no").css({ width: \'85px\', height: \'30px\', color: \'white\', border: \'none\' });
$("#mb_btn_ok").css({ backgroundColor: \'#168bbb\' });
$("#mb_btn_no").css({ backgroundColor: \'#168bbb\', marginLeft: \'20px\' });
//右上角关闭按钮hover样式
$("#mb_ico").hover(function () {
$(this).css({ backgroundColor: \'Red\', color: \'White\' });
}, function () {
$(this).css({ backgroundColor: \'#DDD\', color: \'black\' });
});
var _widht = document.documentElement.clientWidth; //屏幕宽
var _height = document.documentElement.clientHeight; //屏幕高
var boxWidth = $("#mb_con").width();
var boxHeight = $("#mb_con").height();
//让提示框居中
$("#mb_con").css({ top: (_height - boxHeight) / top + "px", left: (_widht - boxWidth) / 2 + "px" });
}
})(jQuery);
</script>
<body>
<input id="add" type="button" value="添加" />
<input id="update" type="button" value="修改" />
<script type="text/javascript">
$("#add").bind("click", function () {
// $.MsgBox.Alert("消息", "哈哈，添加成功！");
zdalert(\'系统提示\',3,"350px",\'请输入正确数值\',function(){
//要回调的方法
window.location.href="http://www.baidu.com"});
});
//也可以传方法名 test
$("#update").bind("click", function () {
// $.MsgBox.Confirm("温馨提示", "确定要进行修改吗？", test);
zdconfirm(\'系统确认框\',6,"350px",\'你确认提交该条数据吗\',function(r){
if(r)
{
//...点确定之后执行的内容
window.location.href="http://www.baidu.com"
}
});
});
</script>
</body>
</html>