<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.overlay{
-webkit-box-align: center;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-transition: 200ms opacity;
background-color: rgba(255, 255, 255, 0.1);
bottom: 0;
display: -webkit-box;
left: 0;
overflow: auto;
padding: 20px;
position: fixed;
right: 0;
top: 0;
z-index: 2;
}
.overlay .page {
-webkit-border-radius: 3px;
-webkit-box-orient: vertical;
-webkit-transition: 200ms -webkit-transform;
background: white;
box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
color: #333;
display: -webkit-box;
min-width: 400px;
min-height: 100px;
padding: 0 10px 5px 10px;
position: relative;
z-index: 0;
}
.overlay .page > .close-button {
background-image: url(images/IDR_CLOSE_DIALOG);
background-position: center;
background-repeat: no-repeat;
height: 14px;
position: absolute;
right: 7px;
top: 7px;
width: 14px;
z-index: 1;
cursor:pointer;
}
.orderfoot {
margin-top: 15px;
margin-bottom: 5px;
text-align: center;
}
.lBtn {
height: 30px;
min-width: 80px;
text-align: center;
color: #a33300;
font: 13px/40px "微软雅黑E\8F6F\96C5\9ED1";
background-color: #FFCD1A;
text-decoration: none;
border: 0;
cursor: pointer;
background-size: 100% 300%;
line-height: 30px;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body style="width:700px;height:800px;border:1px solid red;margin:0px auto;padding:10px;">
<button class="lBtn" onclick="add_Mask()">调用弹窗方法</button>
</body>
</html>
<script type="text/javascript">
function add_Mask(){
var str='<div class="page" style="width:600px;height:470px;border:1px solid black;margin:0px auto;"><h3 class="tanchu_title">新增页面</h3><div class="close-button" onclick="close_xianshi(this)" id="indent_zan_cun_guanbi1">X</div><div class="dialog_content" style="height:339px;padding:10px;border:1px solid red"></div><div class="orderfoot" style=" margin-top:0px"><input type="button" onclick="add_Mask()" value="确 定" class="lBtn" style="margin-right:20px;"><input type="button" value="取 消" class="lBtn" style="margin-right:20px;" onclick="close_xianshi(this)"></div>'
CreatDialog(str,"new_mask");
}
//开启页面
function CreatDialog(html,biao_ji){
if($("."+biao_ji).length>0){
$("."+biao_ji).remove();
}
var eee=$("<div class='overlay "+biao_ji+"' style='display: -webkit-box;'></div>");
//var eee=$("<div class='overlay' style='display: -webkit-box;'></div>").html(html);
//$("body").append(eee);
$("body").append(eee);
eee.html(html);
}
//关闭页面
function close_xianshi(obj)
{
if($(obj).length<1){
return false;
}
if($(obj).hasClass('page'))
{
$(obj).parent().remove();
}else{
close_xianshi($(obj).parent());
}
}
</script>