adding style properties to an alert box

Here's a quick background on what I'm trying to do. I have a contact form on my website, and when the user clicks on 'Submit', I want it to do this:

User clicks submit
Confirmation box opens, asking user to agree or disagree to the disclaimer
if agrees = submit form
if disagrees = close confirmation box

Here is what I want to know. I don't necessarily want to style the actual alert box, since I know that is not possible, what I want to do is style the text inside the alert box; the "disclaimer". I tried just adding header tags and bold tags to it, but those just generate the text and not the actual styles.

Here's the code I'm using, its just a very simple alert box script.. if you have a better idea, please let me know.

<SCRIPT language="JavaScript">
<!--
function go_there()
{
var where_to= confirm("DISCLAIMER TEXT WILL GO HERE");
if (where_to== true)
 {
  window.location="http://mcgehee.ace-onecomputers.com/nlphpmail.php";
 }
  else
 {

 }
}
//-->

HTML:

<button class="button" id="submit" value="send" type="submit" name="submit" onClick="go_there()">Send</button>

Also, another issue i'm having with this is that instead of it just closing the dialog box, it still continues the script.

Solution

You cannot style alert or confirm box. You have to use DHTML box.

Using Impromptu

Try this, I used jQuery Impromptu plugin http://trentrichardson.com/Impromptu/

Demo: http://jsfiddle.net/muthkum/4h8cX/6/

For full code, check out page source on http://fiddle.jshell.net/muthkum/4h8cX/6/show/

Using smoke.js

Demo: http://jsfiddle.net/muthkum/8qXsv/3/

UPDATE:

Here is the full code using jQuery Impromptu

You can see, I've included jquery-1.8.2.js and jquery-impromptu.4.0.min.js. Also styles are included in the below codes. I hope this helps.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by muthkum</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>    

      <script type='text/javascript' src="http://trentrichardson.com/Impromptu/scripts/jquery-impromptu.4.0.min.js"></script>


  <style type='text/css'>
    /*
------------------------------
    Impromptu
------------------------------
*/
.jqifade{
    position: absolute; 
    background-color: #777777; 
}
div.jqi{ 
    width: 400px; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    position: absolute; 
    background-color: #ffffff; 
    font-size: 11px; 
    text-align: left; 
    border: solid 1px #eeeeee;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 7px;
}
div.jqi .jqicontainer{ 
    font-weight: bold; 
}
div.jqi .jqiclose{ 
    position: absolute;
    top: 4px; right: -2px; 
    width: 18px; 
    cursor: default; 
    color: #bbbbbb; 
    font-weight: bold; 
}
div.jqi .jqimessage{ 
    padding: 10px; 
    line-height: 20px; 
    color: #444444; 
}
div.jqi .jqibuttons{ 
    text-align: right; 
    padding: 5px 0 5px 0; 
    border: solid 1px #eeeeee; 
    background-color: #f4f4f4;
}
div.jqi button{ 
    padding: 3px 10px; 
    margin: 0 10px; 
    background-color: #2F6073; 
    border: solid 1px #f4f4f4; 
    color: #ffffff; 
    font-weight: bold; 
    font-size: 12px; 
}
div.jqi button:hover{ 
    background-color: #728A8C;
}
div.jqi button.jqidefaultbutton{
    background-color: #BF5E26;
}
.jqiwarning .jqi .jqibuttons{ 
    background-color: #BF5E26;
}


  </style>



<script type='text/javascript'>//<![CDATA[ 

function go_there(){

    $.prompt('<b>DISCLAIMER</b> <span style="font-weight:normal">TEXT WILL GO HERE</span>',{
       buttons: { Ok: true, Cancel: false}, 
       callback: function(e,v,m,f){
          if(v){
             window.location="http://mcgehee.ace-onecomputers.com/nlphpmail.php";
          }else{

          }
       }
   });

}

//]]>  

</script>


</head>
<body>
  <button class="button" id="submit" value="send" type="submit" name="submit" onClick="go_there()">Send</button>


</body>


</html>