如何改变警示框的风格
我需要在警告框中更改“确定”button的样式。
<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> 警告框是一个系统对象，不受CSS限制。 要做到这一点，你需要创build一个HTML元素并模仿alert()函数。 jQuery UI Modal框为你做了很多工作，基本上就像我所描述的那样工作： Link 。
我试图使用脚本来使用java-script脚本的alert()框样式。在这里我使用了JS和CSS。
参考这个编码的JSfunction。
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")); }
和alert()框的CSS
#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和DEMO RESULT IMAGE
我使用SweetAlert ，它是真棒，你会得到很多的定制选项，以及所有的callback
swal("Here's a message!", "It's pretty, isn't it?");
不可能。 如果你想定制对话框的外观，你需要使用一个基于JS的解决scheme，比如jQuery.UI对话框 。
您需要像这样创build您自己的警报框：
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>
我知道这是一个较旧的post，但我正在寻找类似的东西今天上午。 在看过其他一些解决scheme之后，我觉得我的解决scheme要简单得多。 有一件事是我在锚标记中使用字体真棒。
我想在用户点击事件时在日历上显示一个事件。 所以我编码了一个单独的<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。
下面是我的fullcalendar应用程序的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>
您必须拥有自己的Google日历ID和API密钥。
我希望这有助于当你需要一个简单的popup式显示。
选项1。 你可以使用AlertifyJS ，这是很好的警报
选项2。 你启动或只是join一个基于Web应用程序的项目，接口的devise可能是好的。 否则这应该改变。 为了Web 2.0应用程序，您将使用dynamic内容，许多效果和其他东西。 所有这些都没有问题，但没有人想过设置JavaScript警报和确认框。 这是他们的方式
创build简单的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(); }
创build简单的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>
<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>
一个select是使用altertify ，这给了一个漂亮的警示框。
只需从这里包含所需的库，然后使用以下代码显示警告框。
alertify.confirm("This is a confirm dialog.", function(){ alertify.success('Ok'); }, function(){ alertify.error('Cancel'); });
输出将如下所示。 在这里看到它的行动是演示
样式警报（） – 框是不可能的。 您可以使用JavaScript模式覆盖。
