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

最新推荐文章于 2019-10-06 17:31:45 发布

泛泛之辈Leo

最新推荐文章于 2019-10-06 17:31:45 发布

阅读量580

点赞数

本文链接：https://blog.csdn.net/cheng621/article/details/21938915

版权

<!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' οnclick='closeBox();'></span><img class='ok' src='images/a_succ.png' /><div class='messageBox'>"+msg+"</div><input type='button' value='确定' class='sure_btn' οnclick='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>

泛泛之辈Leo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的自定义提示框（alert）

自定义提示框.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:
复制链接

扫一扫