如何修改alert样式? 漂亮的弹窗
樱花100
2017-01-19 16:41
这样alret 弹出的窗口 都是游览器自带的样式。太丑了！！！！ 我们在做的时候，经理都要求把这个做的美观一些。 怎么做才能做出好看的弹窗呢？ JS初级小白 跪求大神教我 。
6回答
-
- 慕尼黑9128539
- 2018-08-16 11:49:35
window.alert = function(str)
{
var shield = document.createElement("DIV");
shield.id = "shield";
shield.style.position = "absolute";
shield.style.left = "0px";
shield.style.top = "0px";
shield.style.width = "100%";
shield.style.height = document.body.scrollHeight+"px";
//弹出对话框时的背景颜色
shield.style.background = "#fff";
shield.style.textAlign = "center";
shield.style.zIndex = "25";
//背景透明 IE有效
//shield.style.filter = "alpha(opacity=0)";
var alertFram = document.createElement("DIV");
alertFram.id="alertFram";
alertFram.style.position = "absolute";
alertFram.style.left = "50%";
alertFram.style.top = "50%";
alertFram.style.marginLeft = "-225px";
alertFram.style.marginTop = "-75px";
alertFram.style.width = "450px";
alertFram.style.height = "150px";
alertFram.style.background = "#ff0000";
alertFram.style.textAlign = "center";
alertFram.style.lineHeight = "150px";
alertFram.style.zIndex = "300";
strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
strHtml += " <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">[自定义提示]</li>\n";
strHtml += " <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">"+str+"</li>\n";
strHtml += " <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" onclick=\"doOk()\" /></li>\n";
strHtml += "</ul>\n";
alertFram.innerHTML = strHtml;
document.body.appendChild(alertFram);
document.body.appendChild(shield);
var ad = setInterval("doAlpha()",5);
this.doOk = function(){
alertFram.style.display = "none";
shield.style.display = "none";
}
alertFram.focus();
document.body.onselectstart = function(){return false;};
} -
- Russian_Achilles
- 2018-05-28 11:00:09
不需要美观，那要那么多前端，什么客户体验做什么，简单的傻大粗！
-
- perry在路上
- 2017-04-05 15:01:33
个人认为 ：一个警告窗口 无需美观 最主要的实现功能就好
-
- weibo_东璃沫_0
- 2017-03-14 16:41:12
请问，是否已经解决？
-
- 樱花100
- 2017-01-20 14:07:03
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>alert</title>
<script type="text/javascript">
alert:function(msg){
this.show({buttons:{yes:'确认'},msg:msg,title:'消息'});
},
confirm:function(msg,fn){
//fn为回调函数，参数和show方法的一致
this.show({buttons:{yes:'确认',no:'取消'},msg:msg,title:'提示',fn:fn});
},
function rec(){
var mychar="I love JavaScript";
alert(mychar);
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="点击我，弹出对话框" />
</body>
</body>
</html>
我放进去了 但是显示不出来
-
- Damons
- 2017-01-19 17:14:30
alert:function(msg){ this.show({buttons:{yes:'确认'},msg:msg,title:'消息'}); }, confirm:function(msg,fn){ //fn为回调函数，参数和show方法的一致 this.show({buttons:{yes:'确认',no:'取消'},msg:msg,title:'提示',fn:fn}); },
JavaScript入门篇
739814 学习 · 9566 问题
相似问题