adding style properties to an alert box

Question

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.

Answer 1

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>

adding style properties to an alert box

Question

1 answers

solution1
0 ACCPTED 2012-11-02 05:38:45

adding style properties to an alert box

Question

1 answers

solution1 0 ACCPTED 2012-11-02 05:38:45

solution1
0 ACCPTED 2012-11-02 05:38:45