简单的自定义提示框（alert）

来源：互联网发布：apache 域名泛解析编辑：程序博客网时间：2024/05/22 14:16

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义提示框</title>
<style>
.tinyBox{ width:363px; height:151px; background:url(images/tinyBox.png) no-repeat; position:absolute; right:10px; top:600px; z-index:15}
.closeBox{ float:right; display:inline-block; width:30px; height:30px; cursor:pointer}
.sure_btn{ width:76px; height:24px; border:none; background:url(images/sure_btn.png) no-repeat; text-align:center; line-height:24px; float:right; margin-right:20px; cursor:pointer; font-size:14px; color:#FFFFFF; font-weight:bold}
.messageBox{ width: 243px;height: 50px;padding: 10px 0px;margin-top: -40px;text-align: left;font-size: 16px;color: #333;margin-left: 100px}
.ok{margin-top: 40px;margin-left: 30px;vertical-align: middle; width:40px; height:39px;}
.mask_all{z-index:13;position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5;display:none;}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//自定义弹出框
function divAlert(msg){
var Odiv = "<div class='mask_all'></div><div class='tinyBox'><span class='closeBox' onclick='closeBox();'></span><img class='ok' src='images/a_succ.png' /><div class='messageBox'>"+msg+"</div><input type='button' value='确定' class='sure_btn' onclick='closeBox();' /></div>";
$("body").append(Odiv);
$('.mask_all').show();
$('.mask_all').height($(document).height());
};
function closeBox() {
$('.mask_all').hide();
$('.tinyBox').slideUp(300);
};
</script>
</head>

<body onLoad="divAlert('您已经提交过此订单！')">
</body>
</html>

0 0