How to change the style of the notification window

Question

How to change the style of the notification window

I need to change the style of the OK button in the warning window.

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

+100

javascript css

Jay Oct 21 '11 at 17:38

source share

11 answers

I tried using a script for alert() box styles using java-script . Here I used these JS and CSS.

Refer to this JS function for encoding.

 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")); }

And CSS for alert() Box

 #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; }

And the HTML file:

 <input type="button" value = "Test the alert" onclick="alert('Alert this pages');" />

And also see DEMO: JSFIDDLE and DEMO RESULT IMAGE

+58

VIVEK-MDU Apr 05 '14 at 7:28

source share

I use SweetAlert , it is awesome, you will get many customization options, as well as all callbacks

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

+49

Jewel Nov 27 '14 at 11:57

source share

Impossible. If you want to customize the look of the dialog box, you need to use a JS solution, such as the jQuery.UI dialog .

+8

Jon Oct 21 '11 at 17:40

source share

Option1. you can use AlertifyJS , this is useful for warning

Option2. if you are launching or simply joining a web-based project, the interface design is probably good. Otherwise, this must be changed. For Web 2.0 applications, you'll work with dynamic content, lots of effects, and more. All this is fine, but no one thought about creating a JavaScript alert and confirming the checkboxes. Here is their way

create a simple js name for the jsConfirmStyle.js file. Here is a simple js code

 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(); }

Create a simple html file

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

+5

Shafiqul Islam Jul 12 '13 at 13:38

source share

One option is to use altertify , this gives a beautiful warning window.

Just include the required libraries from here and use the following code snippet to display a warning window.

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

The result will look as follows. To see it in action, do a demo

+4

Baig Nov 19 '14 at 11:19

source share

You need to create your own notification window:

 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>

The js part receives an element in HTML to create a warning window, and then deletes it after the user clicks ok.

You can trigger an alert using jAlert("Custom Text", "Ok!");

+4

Stardust Nov 01 '15 at 15:34

source share

I know this is an old post, but I was looking for something similar this morning. I feel that my solution was much easier after looking at some other solutions. First, I use the font in the anchor tag.

I wanted to display an event on my calendar when a user clicked an event. So I encoded a separate <div> something like this:

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

I find it easier to use class names in my jquery since I am using asp.net.

Below is the jquery for my fullcalendar application.

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

You must have your own Google calendar id and API keys.

Hope this helps when you need a simple popup.

+3

Roger Sep 01 '16 at 21:21

source share

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

+2

ImHigh Mar 15 '16 at 12:06

source share

Styling warning () - not possible. Instead, you can use javascript modal overlay.

+1

Secoe Oct 21 '11 at 17:39

source share

I don’t think you could change the default browser warning window style.

You need to create your own or use a simple and custom library such as xdialog . Below is an example for setting up an alert window. More demos can be found 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>

0

xia xiongjun Apr 12 '19 at 17:01

source share

PCasagrande · Accepted Answer · 2011-10-21 17:39

The warning field is a system object and is not subject to CSS. To make this style, you need to create an HTML element and imitate the alert() functionality. The jQuery UI Modal block does a great job for you, working mainly as I described: Link .

How to change the style of the notification window

More articles: