由于页面中原来的alert弹框样式相当的丑,所以就想到了自己去设置一下alert的弹框样式
首先是自己先设计好一个弹框的样式可以如下图:
样式搭建完成就可以用js来编写一个alert函数了:
js部分如下:
function alert(e){
//此处将html中的div等元素拼接起来,添加到body中
var html="";
html+="<div class='con'><div id='msg'>";
html+="<div class='info_message'>";
html+="<div class='alertTitle'>提示</div>";
html+="<span class='detail_message'>"+e+"</span>";
html+="</div><div id='alertSure'>确定</div>";
html+="<div id='alertCancel'>取消</div></div></div>"
$('body').append(html);
clearmsg();
}
function clearmsg(){
//确认按钮
$('#alertSure').click(function(){
$("#msg").remove();
$('.con').remove();
})
//取消按钮
$('#alertCancel').click(function(){
$("#msg").remove();
$('.con').remove();
})
};
将这个js引用,前提要添加jq的框架在此js前面要不$符号和一些方法会报错,有兴趣的可以用原生js来操作
下面贴一下我的代码,有兴趣的同学可以看下效果
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>alert样式修改</title>
<link rel="stylesheet" href="alert.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="alert.js"></script>
</head>
<body>
这是我自己编写的样式div后面放到js中了,此处是注释掉的
<!-- <div class="con">
<div id='msg'>
<div class="info_message">
<div class="alertTitle"></div>
<span class="detail_message">
显示信息显示信息
</span>
</div>
<div id="alertSure">确定</div>
<div id="alertCancel">取消</div>
</div>
</div> -->
<script>
alert('测试');
</script>
</body>
</html>
css:
html,body{height:100%;}
.con{
width:100%;
height:100%;
background:rgba(0,0,0,.1);
position:relative;
}
#msg{
position:absolute;
top:30%;
left:35%;
}
.info_message {
color: #000;
background:#fff;
height: 200px;
display: inline-block;
width:400px;
border-radius: 5px;
}
#alertSure,#alertCancel{
position:absolute;
top: 75%;
left: 46%;
width: 90px;
height: 40px;
text-align: center;
line-height: 40px;
background: #2e9cce;
color: #fff;
cursor:pointer;
border-radius:5px;
}
#alertSure{
top: 75%;
left: 46%;
}
#alertCancel{
top: 75%;
left: 74%;
}
.detail_message{
width:350px;
height:115px;
text-align:center;
overflow: hidden;
display:inline-block;
padding:10px;
margin-left:15px;
color:#2b9bc5;
}
#alertSure:hover,#alertCancel:hover{
background:rgba(118, 206, 247, 0.88);
}
.alertTitle{
height:30px;
background:rgb(114, 209, 255);
}
js部分:
function alert(e){
// $("body").append("<div id='msg'><span>"+e+"</span></div>");
var html="";
html+="<div class='con'><div id='msg'>";
html+="<div class='info_message'>";
html+="<div class='alertTitle'>提示</div>";
html+="<span class='detail_message'>"+e+"</span>";
html+="</div><div id='alertSure'>确定</div>";
html+="<div id='alertCancel'>取消</div></div></div>"
$('body').append(html);
clearmsg();
}
function clearmsg(){
// var t = setTimeout(function(){
// $("#msg").remove();
// },2000)
$('#alertSure').click(function(){
$("#msg").remove();
$('.con').remove();
})
$('#alertCancel').click(function(){
$("#msg").remove();
$('.con').remove();
})
};