Question

这是我正在尝试做的快速背景。我的网站上有联系表格，当用户点击“提交”时，我希望它能够这样做：

用户点击提交
确认框打开，要求用户同意或不同意声明
如果同意=提交表格
如果不同意=关闭确认框

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

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

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

使用Impromptu

试试这个，我使用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>

将样式属性添加到警报框

1 个答案: