如何更改警报框的样式？
Posted
技术标签:
【中文标题】如何更改警报框的样式？【英文标题】：How to change the style of alert box? 【发布时间】：2011-12-12 18:42:51 【问题描述】：我需要更改 alert 框中“确定”按钮的样式。
<head>
<script type="text/javascript">
function show_alert()
alert("Hello! I am an alert box!");
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show alert box" />
</body>【问题讨论】：
你不能。您必须创建自己的。例如，jQuery UI 对话框：jqueryui.it/demos/dialog 请不要使用警告框。有更好的选择。只需将它们用于调试。 lmao @EdHeal，请不要将它们用于调试！ xD 有更好的选择 xD 我从无聊的事情开始无聊xD codepen.io/anon/pen/tFhKu 拒绝接受 jQuery 作为“答案”。正确的答案是提倡尝试标准化 CSS 规范中的某些内容。 【参考方案1】：警告框是一个系统对象，不受 CSS 约束。要实现这种风格，您需要创建一个 html 元素并模仿 alert() 功能。 jQuery UI 对话为你做了很多工作，基本上就像我描述的那样工作：Link.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function()
$( "#dialog" ).dialog();
);
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>【讨论】：
小心，因为 jQueryUI 模态框不会暂停 Jquery 代码执行等待用户点击（就像警报一样）。 一个很好的处理方法是在你的事件处理程序中包含 event.preventDefault()。 可以使用纯js创建警报***.com/a/30498126/4696809【参考方案2】：我使用 SweetAlert， 太棒了，您将获得很多自定义选项以及所有回调
swal("Here's a message!", "It's pretty, isn't it?");
【讨论】：
我们可以在纯 javascript 和 HTML 中使用它吗？ sweetalert 有太多问题 + 上次发布是 2 年前，检查 sweetalert 2 - sweetalert2.github.io【参考方案3】：我尝试使用 java-script 为 alert() 框样式使用脚本。这里我使用了那些 JS 和 CSS。
参考此编码 JS 功能。
var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";
if(document.getElementById)
window.alert = function(txt)
createCustomAlert(txt);
function createCustomAlert(txt)
d = document;
if(d.getElementById("modalContainer")) return;
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
mObj.style.height = d.documentElement.scrollHeight + "px";
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
alertObj.style.visiblity="visible";
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));
msg = alertObj.appendChild(d.createElement("p"));
//msg.appendChild(d.createTextNode(txt));
msg.innerHTML = txt;
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
btn.href = "#";
btn.focus();
btn.onclick = function() removeCustomAlert();return false;
alertObj.style.display = "block";
function removeCustomAlert()
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
CSS 用于 alert() 框
#modalContainer
background-color:rgba(0, 0, 0, 0.3);
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:10000;
background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
#alertBox
position:relative;
width:300px;
min-height:100px;
margin-top:50px;
border:1px solid #666;
background-color:#fff;
background-repeat:no-repeat;
background-position:20px 30px;
#modalContainer > #alertBox
position:fixed;
#alertBox h1
margin:0;
font:bold 0.9em verdana,arial;
background-color:#3073BB;
color:#FFF;
border-bottom:1px solid #000;
padding:2px 0 2px 5px;
#alertBox p
font:0.7em verdana,arial;
height:50px;
padding-left:5px;
margin-left:55px;
#alertBox #closeBtn
display:block;
position:relative;
margin:5px auto;
padding:7px;
border:0 none;
width:70px;
font:0.7em verdana,arial;
text-transform:uppercase;
text-align:center;
color:#FFF;
background-color:#357EBD;
border-radius: 3px;
text-decoration:none;
/* unrelated styles */
#mContainer
position:relative;
width:600px;
margin:auto;
padding:5px;
border-top:2px solid #000;
border-bottom:2px solid #000;
font:0.7em verdana,arial;
h1,h2
margin:0;
padding:4px;
font:bold 1.5em verdana;
border-bottom:1px solid #000;
code
font-size:1.2em;
color:#069;
#credits
position:relative;
margin:25px auto 0px auto;
width:350px;
font:0.7em verdana;
border-top:1px solid #000;
border-bottom:1px solid #000;
height:90px;
padding-top:4px;
#credits img
float:left;
margin:5px 10px 5px 0px;
border:1px solid #000000;
width:80px;
height:79px;
.important
background-color:#F5FCC8;
padding:2px;
code span
color:green;
和HTML文件：
<input type="button" value = "Test the alert" onclick="alert('Alert this pages');" />
还可以查看此DEMO: JSFIDDLE 和演示结果图像
【讨论】：
但这是自定义警报，而不是原始浏览器警报框的样式。有什么诀窍吗，我们还是不见了？ 答案中的自定义警报与本机警报不兼容。本机警报和提示是阻塞等待的。 我怎样才能使它成为确认框？【参考方案4】：不可能。如果要自定义对话框的视觉外观，则需要使用基于 JS 的解决方案，例如 jQuery.UI dialog。
【讨论】：
【参考方案5】：Option1.你可以使用AlertifyJS，这对警报有好处
选项2。你刚开始或刚加入一个基于web应用程序的项目，界面设计可能不错。否则这应该改变。为了 Web 2.0 应用程序，您将使用动态内容、许多效果和其他东西。所有这些都很好，但没有人考虑过设计 JavaScript 警报和确认框的样式。 这是他们的方式
创建简单的 js 文件名 jsConfirmStyle.js。这是简单的js代码
ie5=(document.getElementById&&document.all&&document.styleSheets)?1:0;
nn6=(document.getElementById&&!document.all)?1:0;
xConfirmStart=800;
yConfirmStart=100;
if(ie5||nn6)
if(ie5) cs=2,th=30;
else cs=0,th=20;
document.write(
"<div id='jsconfirm'>"+
"<table>"+
"<tr><td id='jsconfirmtitle'></td></tr>"+
"<tr><td id='jsconfirmcontent'></td></tr>"+
"<tr><td id='jsconfirmbuttons'>"+
"<input id='jsconfirmleft' type='button' value='' onclick='leftJsConfirm()' onfocus='if(this.blur)this.blur()'>"+
" "+
"<input id='jsconfirmright' type='button' value='' onclick='rightJsConfirm()' onfocus='if(this.blur)this.blur()'>"+
"</td></tr>"+
"</table>"+
"</div>"
);
document.write("<div id='jsconfirmfade'></div>");
function leftJsConfirm()
document.getElementById('jsconfirm').style.top=-1000;
document.location.href=leftJsConfirmUri;
function rightJsConfirm()
document.getElementById('jsconfirm').style.top=-1000;
document.location.href=rightJsConfirmUri;
function confirmAlternative()
if(confirm("Scipt requieres a better browser!")) document.location.href="http://www.mozilla.org";
leftJsConfirmUri = '';
rightJsConfirmUri = '';
/**
* Show the message/confirm box
*/
function showConfirm(confirmtitle,confirmcontent,confirmlefttext,confirmlefturi,confirmrighttext,confirmrighturi)
document.getElementById("jsconfirmtitle").innerHTML=confirmtitle;
document.getElementById("jsconfirmcontent").innerHTML=confirmcontent;
document.getElementById("jsconfirmleft").value=confirmlefttext;
document.getElementById("jsconfirmright").value=confirmrighttext;
leftJsConfirmUri=confirmlefturi;
rightJsConfirmUri=confirmrighturi;
xConfirm=xConfirmStart, yConfirm=yConfirmStart;
if(ie5)
document.getElementById("jsconfirm").style.left='25%';
document.getElementById("jsconfirm").style.top='35%';
else if(nn6)
document.getElementById("jsconfirm").style.top='25%';
document.getElementById("jsconfirm").style.left='35%';
else confirmAlternative();
创建简单的html文件
<html>
<head>
<title>jsConfirmSyle</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="jsConfirmStyle.js"></script>
<script type="text/javascript">
function confirmation()
var answer = confirm("Wanna visit google?")
if (answer)
window.location = "http://www.google.com/";
</script>
<style type="text/css">
body
background-color: white;
font-family: sans-serif;
#jsconfirm
border-color: #c0c0c0;
border-width: 2px 4px 4px 2px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: -1000px;
z-index: 100;
#jsconfirm table
background-color: #fff;
border: 2px groove #c0c0c0;
height: 150px;
width: 300px;
#jsconfirmtitle
background-color: #B0B0B0;
font-weight: bold;
height: 20px;
text-align: center;
#jsconfirmbuttons
height: 50px;
text-align: center;
#jsconfirmbuttons input
background-color: #E9E9CF;
color: #000000;
font-weight: bold;
width: 125px;
height: 33px;
padding-left: 20px;
#jsconfirmleft
background-image: url(left.png);
#jsconfirmright
background-image: url(right.png);
</style>
<p>
<a href="#" onclick="javascript:showConfirm('Please confirm','Are you really sure to visit google?','Yes','http://www.google.com','No','#')">JsConfirmStyled</a> </p>
<p><a href="#" onclick="confirmation()">standard</a></p>
</body>
</html>
【讨论】：
【参考方案6】：您需要像这样创建自己的警报框：
function jAlert(text, customokay)
document.getElementById('jAlert_content').innerHTML = text;
document.getElementById('jAlert_ok').innerHTML = customokay;
document.body.style.backgroundColor = "gray";
document.body.style.cursor="wait";
jAlert("Stop! Stop!", "<b>Okay!</b>");#jAlert_table, #jAlert_th, #jAlert_td
border: 2px solid blue;
background-color:lightblue;
border-collapse: collapse;
width=100px;
#jAlert_th, #jAlert_td
padding:5px;
padding-right:10px;
padding-left:10px;
#jAlert
/* Position fixed */
position:fixed;
/* Center it! */
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
<p>TEXT</p>
<div id="jAlRem">
<div id="jAlert">
<table id="jAlert_table">
<tr id="jAlert_tr">
<td id="jAlert_td"> <p id="jAlert_content"></p> </td>
<td id="jAlert_td"> <button id='jAlert_ok' onclick="jAlertagree()"></button> </td>
</tr>
</table>
</div>
</div>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<script>
function jAlertagree()
var parent = document.getElementById('jAlRem');
var child = document.getElementById('jAlert');
parent.removeChild(child);
document.body.style.backgroundColor="white";
document.body.style.cursor="default";
</script>js部分获取HTML中的元素创建警告框，然后在用户点击ok后将其删除。
您可以使用jAlert("Custom Text", "Ok!"); 调用警报
【讨论】：
+1 不错的开始示例，将width=100px; 编辑为 width:100px; 并使用类而不是 id，#jAlert_th 从未使用过，
@a55 是的，所有有效积分。我必须承认，我写这篇文章大约是在五年前，当时我还是 Web 开发的新手。【参考方案7】：
一种选择是使用altertify，这会提供一个漂亮的警报框。
只需包含来自here 的所需库，并使用以下代码显示警告框。
alertify.confirm("This is a confirm dialog.",
function()
alertify.success('Ok');
,
function()
alertify.error('Cancel');
);
输出将如下所示。在这里查看它的实际效果是demo
【讨论】：
【参考方案8】：我知道这是一篇较旧的帖子，但今天早上我正在寻找类似的东西。 在查看了其他一些解决方案后，我觉得我的解决方案要简单得多。 One thing is that I use font awesome in the anchor tag.
当用户单击事件时，我想在我的日历上显示一个事件。所以我编写了一个单独的<div> 标签，如下所示：
<div id="eventContent" class="eventContent" style="display: none; border: 1px solid #005eb8; position: absolute; background: #fcf8e3; width: 30%; opacity: 1.0; padding: 4px; color: #005eb8; z-index: 2000; line-height: 1.1em;">
<a style="float: right;"><i class="fa fa-times closeEvent" aria-hidden="true"></i></a><br />
Event: <span id="eventTitle" class="eventTitle"></span><br />
Start: <span id="startTime" class="startTime"></span><br />
End: <span id="endTime" class="endTime"></span><br /><br />
</div>
我发现在我的 jquery 中使用类名更容易，因为我使用的是 asp.net。
Below is the jquery for my fullcalendar app.
<script>
$(document).ready(function()
$('#calendar').fullCalendar(
googleCalendarApiKey: 'APIkey',
header:
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
,
events:
googleCalendarId: '@group.calendar.google.com'
,
eventClick: function (calEvent, jsEvent, view)
var stime = calEvent.start.format('MM/DD/YYYY, h:mm a');
var etime = calEvent.end.format('MM/DD/YYYY, h:mm a');
var eTitle = calEvent.title;
var xpos = jsEvent.pageX;
var ypos = jsEvent.pageY;
$(".eventTitle").html(eTitle);
$(".startTime").html(stime);
$(".endTime").html(etime);
$(".eventContent").css('display', 'block');
$(".eventContent").css('left', '25%');
$(".eventContent").css('top', '30%');
return false;
);
$(".eventContent").click(function()
$(".eventContent").css('display', 'none');
);
);
</script>
您必须拥有自己的谷歌日历 ID 和 API 密钥。
我希望这在您需要简单的弹出式显示时有所帮助。
【讨论】：
迟到回答问题没有错。保持最新的答案很重要。【参考方案9】：<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function()
$( "#dialog" ).dialog(
autoOpen: false,
show:
effect: "blind",
duration: 1000
,
hide:
effect: "explode",
duration: 1000
);
$( "#opener" ).click(function()
$( "#dialog" ).dialog( "open" );
);
);
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</body>【讨论】：
【参考方案10】：我使用sweetalert2 库。它真的很简单，有很多自定义，现代的动画窗口，引人注目，而且设计也很好。
Swal.fire(
icon: 'error',
title: 'Oops...',
text: 'Something went wrong!',
footer: '<a href>Why do I have this issue?</a>'
)
查看link
【讨论】：
【参考方案11】：样式alert()-boxes 是不可能的。您可以改用 javascript 模态覆盖。
【讨论】：
【参考方案12】：我认为您无法更改浏览器默认警报框的样式。
您需要创建自己的库或使用简单且可自定义的库，例如 xdialog。以下是自定义警报框的示例。更多demo可以看here。
function show_alert()
xdialog.alert("Hello! I am an alert box!");
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.js"></script>
<style>
.xd-content .xd-body .xd-body-inner
max-height: unset;
.xd-content .xd-body p
color: #f0f;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
.xd-content .xd-button.xd-ok
background: #734caf;
</style>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show alert box" />
</body>【讨论】：
一件事是警报必须在页面中间。 @MuhammadAliDEV 您可以覆盖默认警报效果。您可以打开https://xxjapp.github.io/xdialog/ 并自己在 F12 控制台中尝试以下行。 xdialog.alert("Hello! I am an alert box!", effect: 'fade_in_and_scale');【参考方案13】：
我使用 AlertifyJS 来设置我的对话样式。
alertify.alert('Ready!');
alertify.YoutubeDialog || alertify.dialog('YoutubeDialog',function()
var iframe;
return
// dialog constructor function, this will be called when the user calls alertify.YoutubeDialog(videoId)
main:function(videoId)
//set the videoId setting and return current instance for chaining.
return this.set(
'videoId': videoId
);
,
// we only want to override two options (padding and overflow).
setup:function()
return
options:
//disable both padding and overflow control.
padding : !1,
overflow: !1,
;
,
// This will be called once the DOM is ready and will never be invoked again.
// Here we create the iframe to embed the video.
build:function()
// create the iframe element
iframe = document.createElement('iframe');
iframe.frameBorder = "no";
iframe.width = "100%";
iframe.height = "100%";
// add it to the dialog
this.elements.content.appendChild(iframe);
//give the dialog initial height (half the screen height).
this.elements.body.style.minHeight = screen.height * .5 + 'px';
,
// dialog custom settings
settings:
videoId:undefined
,
// listen and respond to changes in dialog settings.
settingUpdated:function(key, oldValue, newValue)
switch(key)
case 'videoId':
iframe.src = "https://www.youtube.com/embed/" + newValue + "?enablejsapi=1";
break;
,
// listen to internal dialog events.
hooks:
// triggered when the dialog is closed, this is seperate from user defined onclose
onclose: function()
iframe.contentWindow.postMessage('"event":"command","func":"pauseVideo","args":""','*');
,
// triggered when a dialog option gets update.
// warning! this will not be triggered for settings updates.
onupdate: function(option,oldValue, newValue)
switch(option)
case 'resizable':
if(newValue)
this.elements.content.removeAttribute('style');
iframe && iframe.removeAttribute('style');
else
this.elements.content.style.minHeight = 'inherit';
iframe && (iframe.style.minHeight = 'inherit');
break;
;
);
//show the dialog
alertify.YoutubeDialog('GODhPuM5cEE').set(frameless:true);<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.rtl.min.css"/>【讨论】：
以上是关于如何更改警报框的样式？的主要内容，如果未能解决你的问题，请参考以下文章