<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="bootstrapMessageAlert.js" ></script>
<style type="text/css">
.mah3 {
font-weight: 600;
margin: 0;
}
.mabody{
text-align: center;
}
.mafooter{
text-align: center;
}
.mabun {
font-family: "Microsoft YaHei" ! important;
font-size: 13px;
color: white;
height:34;
background-color: #5cbdf4;
border-radius: 2px;
}
.mabun:hover {
background-color: #59cbf9;
}
</style>
</head>
<body>
<!-- 解决bootstrap多个弹窗嵌套的问题 -->
<script type="text/javascript">
$(document).on('show.bs.modal', '.modal', function(event) {
//$(this).appendTo($('body'));
}).on('shown.bs.modal', '.modal.in', function(event) {
setModalsAndBackdropsOrder();
}).on('hidden.bs.modal', '.modal', function(event) {
setModalsAndBackdropsOrder();
});
$.fn.modal.Constructor.prototype.hideModal = function () {
var that = this;
this.$element.hide();
this.backdrop(function () {
//判断当前页面所有的模态框都已经隐藏了之后body移除.modal-open，即body出现滚动条。
if ($('.modal.fade.in').length === 0){
that.$body.removeClass('modal-open');
that.$body.css({"padding":"8px 20px"});
}else{
that.$body.addClass('modal-open');
that.$body.css({"padding":"8px 20px"});
}
//that.resetAdjustments();
that.resetScrollbar();
that.$element.trigger('hidden.bs.modal');
});
};
function setModalsAndBackdropsOrder() {
var modalZIndex = 1040;
//遍历排序模态框 用layer 区分模态框层
$('.modal.in').each(function(index) {
var $modal = $(this);
var layer = $modal.attr('layer');
if(!layer||layer === undefined){
$modal.attr('layer', $('.modal.in').length);
}
$modal.css('zIndex', modalZIndex+(parseFloat($modal.attr('layer'))));
});
//遍历排序模态框遮罩 用layer 区分模态框层
$('.modal-backdrop.in').each(function(index) {
$modalbackdrop = $(this);
var layer = $modalbackdrop.attr('layer');
if(!layer||layer === undefined){
$modalbackdrop.attr('layer', $('.modal-backdrop.in').length-1);
}
$modalbackdrop.addClass('hidden').css('zIndex', modalZIndex+(parseFloat($modalbackdrop.attr('layer'))));
if(index === $('.modal-backdrop.in').length-1){
$modalbackdrop.removeClass('hidden');
}
});
}
</script>
<script type="text/javascript" >
var win1 = new ebootstrap.msgAlert("弹窗1",function(){
var win1_1 = new ebootstrap.msgAlert("弹窗1-1",function(){alert("1-1-sure");},function(){alert("1-1-close");});
win1_1.alert();
},function(){alert(12);});
win1.alert();
var win2 = new ebootstrap.msgAlert("弹窗2",function(){
var win2_2 = new ebootstrap.msgAlert("弹窗2-2",function(){alert(2);},function(){alert(3);});
win2_2.alert();
});
win2.alert();
</script>
</body>
</html>
