Bdtjtk

I tried to use script for alert() boxes styles using java-script.Here i used those JS and CSS.

Refer this coding JS functionality.

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 HTML file:

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

And also View this DEMO: JSFIDDLE and DEMO RESULT IMAGE

I use SweetAlert, It's Awesome, You will get lots of customization option as well as all callbacks

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

Not possible. If you want to customize the dialog's visual appearance, you need to use a JS-based solution like jQuery.UI dialog.

Option1. you can use AlertifyJS , this is good for alert

Option2. you start up or just join a project based on webapplications, the design of interface is maybe good. Otherwise this should be changed. In order to Web 2.0 applications you will work with dynamic contents, many effects and other stuff. All these things are fine, but no one thought about to style up the JavaScript alert and confirm boxes.
Here is the they way

create simple js file name jsConfirmStyle.js. Here is 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 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>

You need to create your own alert box like this:

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 portion gets the element in the HTML to create the alert box, then deletes it after the user clicks ok.

You can call the alert using jAlert("Custom Text", "Ok!");

One option is to use altertify, this gives a nice looking alert box.

Simply include the required libraries from here, and use the following piece of code to display the alert box.

alertify.confirm("This is a confirm dialog.",

  function(){

    alertify.success('Ok');

  },

  function(){

    alertify.error('Cancel');

  });

The output will look like this. To see it in action here is the demo

I know this is an older post but I was looking for something similar this morning.
I feel that my solution was much simpler after looking over some of the other solutions.
One thing is that I use font awesome in the anchor tag.

I wanted to display an event on my calendar when the user clicked the event. So I coded a separate <div> tag like so:

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

You must have your own google calendar id and api keys.

I hope this helps when you need a simple popup display.

Styling alert()-boxes ist not possible. You could use a javascript modal overlay instead.