如何修改alert樣式? 漂亮的彈窗
這樣alret 彈出的窗口 都是游覽器自帶的樣式。太丑了！?。?！ 我們在做的時候，經(jīng)理都要求把這個做的美觀一些。 怎么做才能做出好看的彈窗呢？ JS初級小白 ?跪求大神教我 。
櫻花100
2017-01-19
6 回答
舉報
0/150
提交
取消
2018-08-16
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;};?
}
2018-05-28
不需要美觀，那要那么多前端，什么客戶體驗做什么，簡單的傻大粗！
2017-04-05
個人認為 ?：一個警告窗口 ?無需美觀 ?最主要的實現(xiàn)功能就好 ?
2017-03-14
請問，是否已經(jīng)解決？
2017-01-20
<!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為回調(diào)函數(shù)，參數(shù)和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>
我放進去了 但是顯示不出來
2017-01-19
alert:function(msg){?? ???this.show({buttons:{yes:'確認'},msg:msg,title:'消息'});?? ?},?? ?confirm:function(msg,fn){?? ???//fn為回調(diào)函數(shù)，參數(shù)和show方法的一致?? ???this.show({buttons:{yes:'確認',no:'取消'},msg:msg,title:'提示',fn:fn});?? ?},