修改网页的alert弹框样式让你的页面更美观(js封装之路(1.1))

来源:转载

由于页面中原来的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(); })};




分享给朋友:
您可能感兴趣的文章:
随机阅读: