JS系统默认弹框样式修改
2018-08-21 本文已影响0人
wangjunmech
<style type="text/css">
#msg{
position: fixed;
z-index:999;
top: 50%;
margin-top:-80px;
left:50%;
margin-left:-133px;
width:30%;
height:auto;
background:#DBF992;/*主弹窗颜色*/
box-shadow:5px 5px 8px #999;
font-size:17px;
color:#666;
border:2px solid blue;
text-align: center;
line-height: 2rem;
display:inline-block;
padding-bottom:20px;
border-radius:2px;
}
#msg_top{
background:#54A7FF;/*弹窗头部背景颜色*/
padding:5px 15px 5px 20px;
text-align:left;
}
#msg_top span{
font-size:44px;/*右上关闭X标记*/
float:right;
cursor:pointer;
}
#msg_cont{
padding:20px 20px 20px;
text-align:left;
}
#msg_clear{
display:inline-block;
color:red;/*确定按钮文本颜色*/
padding:1px 15px;
background:#FF6C00;/*确定按钮颜色*/
border-radius:2px;
float:right;
margin-right:15px;
cursor:pointer;
width: 50%;
line-height: 30px;
font-size:22px;
}
#msg_clear:hover{
background:#999;/*确定按钮颜色*/
}
</style>
<script>
function alert(e){
$("body").append('<div id="msg"><div id="msg_top"><img src="http://wangjunmechdevise.blog.163.com/blog/animated_favicon.gif" alt=""> <b>Prompt information</b> <span class="msg_close">×</span></div><div id="msg_cont">'+e+'</div><div class="msg_close" id="msg_clear">Confirm</div></div>');
$(".msg_close").click(function (){
$("#msg").remove();
});
}
</script>