使用jquery修改alert弹出框默认样式

制作网页的时候经常会用到alert来给用户做一些提示信息,但是不同的浏览器的弹出框的样式也是各不相同。所以我们可以自己美化一下。

<script type=”text/javascript”>
function alert(e) {
$(“body”).append(‘<div id=”alerts”><div id=”ale”><div id=”aleTop”>提示<span class=”aleClose”>×</span></div><div id=”aleContent”>’+e+'</div><div class=”aleClose”>关闭</div></div></div>’);
$(“.aleClose”).click(function (){
$(“#alerts”).remove();
});
}
</script>

<style type=”text/css”>
#alerts{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
#ale{
width:250px;
position: fixed;
z-index:2;
top: 50%;
left:50%;
margin-top:-80px;
margin-left:-125px;
background:#fff;
font-size:16px;
border:1px solid #f5f5f5;
text-align: center;
}
#aleTop{
background:#30a2eb;
padding:5px 15px;
text-align: center;
color: #fff;
}
span.aleClose{
float: right;
cursor: pointer;
}
#aleContent{
padding: 15px;
}
div.aleClose{
width: 20%;
color:#fff;
padding:8px 15px;
background:#30a2eb;
cursor:pointer;
margin: 0 auto;
}
</style>

<script type=”text/javascript”>
alert(“修改样式”);
</script>

思路就是重新定义一下alert(),构建一个函数,然后自己修改显示的样式美化弹出层。

更多代码请关注代码日记本~

原文链接:,转发请注明来源!

发表评论

要发表评论,您必须先登录