将样式属性添加到警报框

Question

以下是我正在尝试做的事情的简要背景。我的网站上有一个联系表，当用户点击“提交”时，我希望它这样做：

1. 用户点击提交
2. 确认框打开，要求用户同意或不同意 免责声明
3. 如果同意 = 提交表单
4. 如果不同意 = 关闭确认框

这是我想知道的。我不一定要设置实际警报框的样式，因为我知道这是不可能的，我想做的是设置警报框中的文本； “免责声明”。我尝试只添加标题标签和粗体标签，但这些只是生成文本而不是实际样式。

这是我正在使用的代码，它只是一个非常简单的警报框脚本。如果您有更好的想法，请告诉我。

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

另外，我遇​​到的另一个问题是它不仅关闭对话框，还继续执行脚本。

Answer 1

您不能设置警报或确认框的样式。您必须使用 DHTML 框。

即兴演奏

试试这个，我用jQuery Impromptu插件http://trentrichardson.com/Impromptu/

演示：http://jsfiddle.net/muthkum/4h8cX/6/

如需完整代码，请查看http://fiddle.jshell.net/muthkum/4h8cX/6/show/上的页面源代码

使用smoke.js

演示：http://jsfiddle.net/muthkum/8qXsv/3/

更新：

这是使用jQuery Impromptu的完整代码

你可以看到，我已经包含了jquery-1.8.2.js 和jquery-impromptu.4.0.min.js。样式也包含在以下代码中。我希望这会有所帮助。

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

​