如何更改提醒框的样式？

我需要改变“确定”按钮在一个 警报框的样式。

<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>

694638 次浏览
小开
最佳答案

警告框是一个系统对象，不受 CSS 约束。要做到这一点，您需要创建一个 HTML 元素并模拟 alert()功能。JQueryUI 对话为您做了很多工作，基本上就像我所描述的那样: 林克。

<!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>

小开

样式警告()-框是不可能的。您可以使用一个 javascript 模式覆盖代替。

小开

不可能。如果您想自定义对话框的可视外观，您需要使用像 UI 对话框这样的基于 JS 的解决方案。

小开

选项1. 您可以使用 AlertifyJS，这对于警报是很好的

enter image description here

enter image description here

方案2。当你开始或者刚刚加入一个基于 web 应用的项目时，界面的设计可能是不错的。否则，这应该改变。为了使用 Web 2.0应用程序，您将使用动态内容、许多效果和其他东西。所有这些都很好，但是没有人想到要设计 JavaScript 警告和确认框。 这就是他们的方式

创建简单的 js 文件名 jsConfirStyle.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()'>"+
"&nbsp;&nbsp;"+
"<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>
小开

我尝试使用脚本 alert()盒子样式使用 java-script。在这里我使用那些 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');" />

并查看此 JSFIDDLE和 DEMO 结果图像

enter image description here

小开

一种选择是使用 改变，这样可以提供一个漂亮的警告框。

只需从 给你中包含所需的库，并使用以下代码段显示警报框。

alertify.confirm("This is a confirm dialog.",
function(){
alertify.success('Ok');
},
function(){
alertify.error('Cancel');
});

输出如下所示

enter image description here

小开

我使用 甜蜜警报,这是太棒了，你会得到很多定制选项以及所有的回调

Screenshot

swal("Here's a message!", "It's pretty, isn't it?");

enter image description here

小开

您需要创建自己的警告框，如下所示:

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 中的元素以创建警告框，然后在用户单击 好吧。后删除它

您可以使用 jAlert("Custom Text", "Ok!");调用警报

小开 

<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>

小开

我知道这是一个旧的职位，但我一直在寻找类似的东西今天上午。 在看过其他一些解决方案之后，我觉得我的解决方案要简单得多。 有一点是我在锚标签中使用了字体 Awesome。

我想在用户单击事件时在日历上显示一个事件。因此，我编写了一个单独的 <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。

下面是我的全日历应用程序的 jquery。

<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 键。

我希望这有助于您需要一个简单的弹出式显示。

小开

我不认为你可以改变浏览器默认警告框的风格。

您需要创建自己的或者使用一个简单的、可定制的库，比如 对话框。下面是自定义警报框的示例。更多的演示可以找到 给你。

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>

小开

我使用的是 sweetalert2库。它真的很简单，有很多定制，现代，动画窗口，引人注目，还有漂亮的设计。

Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Something went wrong!',
footer: '<a href>Why do I have this issue?</a>'
})

看看这个 链接

小开

我使用 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"/>


提交答案