Modify Alert Boxes Confirmation Using Script & CSS

You can modify the box using javascript and style (css)
For standard boxes, display boxes each browser is different. However, if you use this animation box, All browsers will display the same box.

The first step:
Upload files to your hosting .js called files / boxes.js 
Or if you want to put the script directly to the post page, you can directly use the script.

<script type="text/javascript">
ie5=(document.getElementById&&document.all&&document.styleSheets)?1:0;
Kangsigit=(document.getElementById&&!document.all)?1:0;
xConfirmStart=800;
yConfirmStart=100;
if(ie5||Kangsigit) {
if(ie5) cs=2,th=30;
else cs=0,th=20;
document.write(
    "<div id='JavaScriptConfirmation'>"+
        "<table>"+
            "<tr><td id='JavaScriptConfirmTitle'></td></tr>"+
            "<tr><td id='JavaScriptContent'></td></tr>"+
            "<tr><td id='JavaScriptConfirmButton'>"+
                "<input id='JavaScriptConfirmLeft' type='button' value='' onclick='LeftJavaScriptConfirm()' onfocus='if(this.blur)this.blur()'>"+
                "&nbsp;&nbsp;"+
                "<input id='JavaScriptConfirmRight' type='button' value='' onclick='RightJavaScriptConfirm()' onfocus='if(this.blur)this.blur()'>"+
            "</td></tr>"+
        "</table>"+
    "</div>"
);
 }
           document.write("<div id='josciyus'></div>");
function LeftJavaScriptConfirm() {
document.getElementById('JavaScriptConfirmation').style.top=-1000;
document.location.href=leftJavascriptConfirmUri;
}
function RightJavaScriptConfirm() {
document.getElementById('JavaScriptConfirmation').style.top=-1000;
document.location.href=RightJavascriptConfirmUri;
}
function confirmAlternative() {
if(confirm("Scipt requieres a better browser!")) document.location.href="http://4sharap.blogspot.com/";
 }
leftJavascriptConfirmUri = '';
RightJavascriptConfirmUri = '';
/**
 * Show the message/confirm box
*/
function showConfirm(confirmtitle,confirmcontent,confirmlefttext,confirmlefturi,confirmrighttext,confirmrighturi)  {
document.getElementById("JavaScriptConfirmTitle").innerHTML=confirmtitle;
document.getElementById("JavaScriptContent").innerHTML=confirmcontent;
document.getElementById("JavaScriptConfirmLeft").value=confirmlefttext;
document.getElementById("JavaScriptConfirmRight").value=confirmrighttext;
leftJavascriptConfirmUri=confirmlefturi;
RightJavascriptConfirmUri=confirmrighturi;
xConfirm=xConfirmStart, yConfirm=yConfirmStart;
if(ie5) {
    document.getElementById("JavaScriptConfirmation").style.left='25%';
    document.getElementById("JavaScriptConfirmation").style.top='35%';
}
else if(Kangsigit) {
    document.getElementById("JavaScriptConfirmation").style.top='25%';
    document.getElementById("JavaScriptConfirmation").style.left='35%';
}
else confirmAlternative();
}
        </script>

<html>
<head>
<title>JSConfirmSyle</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>
<body>

Complete the following style box with a script that looks more beautiful.

<style type="text/css">
    body {
  background-color: white;
   font-family: sans-serif;
  }
#JavaScriptConfirmation {
border-color: #c0c0c0;
border-width: 2px 4px 4px 2px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: -1000px;
z-index: 100;
}
#JavaScriptConfirmation table {
background-color: #fff;
border: 2px groove #c0c0c0;
height: 150px;
width: 300px;
}
#JavaScriptConfirmTitle {
background-color: #B0B0B0;
font-weight: bold;
height: 20px;
text-align: center;
}
#JavaScriptConfirmButton {
height: 50px;
text-align: center;
}
#JavaScriptConfirmButton input {
background-color: #E9E9CF;
color: #000000;
font-weight: bold;
width: 125px;
height: 33px;
padding-left: 20px;
}
#JavaScriptConfirmLeft{
background-image: url(left.png);
}
#JavaScriptConfirmRight{
background-image: url(right.png);
}
</style>

Last step, make the tag boxes <a> </a> as execution

 <p>
<a onclick="javascript:showConfirm('Please confirm','Are you really sure to visit me?','Yes','http://www.kangsigit.com','No','#')"><b style="background-color:red;color:rgb(241, 234, 234);padding-right:5px;padding-left:5px;cursor:pointer">Examples</b></a> </p>
</body>
 </html>
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini