Question

我正在尝试创建一个从javascript延迟显示的模态表单。

当我使用按钮（onClick事件）启动模态窗体时，参数将正确提交到窗体，但是当从定时器显示窗体时（使用setTimeout），将显示模式窗体，但参数不会传递给形成。两种情况都在下面的例子中。任何帮助/链接非常感谢。我只是想不通两个选项有什么区别：

<!doctype html>
  <head>
  <link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
     </head>
  <body>
  Main Page

<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary">Contact us</a></p></div>

    <!-- model content -->    
    <div id="form-content" class="modal hide fade in" style="display: none; ">
            <div class="modal-header">
                  <a class="close" data-dismiss="modal">×</a>
                  <h3>Contact us</h3>
            </div>
        <div>
            <form class="contact">
            <fieldset>
                 <div class="modal-body">
                     <ul class="nav nav-list">
                <li class="nav-header">Name</li>
  ...
            </fieldset>
            </form>
        </div>
         <div class="modal-footer">
             <button class="btn btn-success" id="submit">submit</button>
             <a href="#" class="btn" data-dismiss="modal">Close</a>
          </div> </div>


<script>
$(document).ready(function() {
    setTimeout(function() {
      timeTriggeredModal();//
    }, 300); // milliseconds
});

//>>>This does not work <<<<<<
function timeTriggeredModal() {
$('#form-content').fadeIn(300)(function(){
            $.ajax({
            type:    "POST",
             url:    "process.php",
            data:    $('form.contact').serialize(),
            success: function(msg){
                       // $("#thanks").html(msg)
                          $("#form-content").modal('hide');    
                 },
            error: function(){
                alert("failure");
            }
           });
    });
};

//>>>>>>>>This works<<<
 $(function() {
//twitter bootstrap script
    $("button#submit").click(function(){
            $.ajax({
            type:    "POST",
             url:    "process.php",
            data:    $('form.contact').serialize(),
            success: function(msg){
                       // $("#thanks").html(msg)
                          $("#form-content").modal('hide');    
                 },
            error: function(){
                alert("failure");
            }
           });
    });
});
</script>
</body>
</html>

请参阅示例：http://www.heartlink.co.uk/heartlink/test4/

Answer 1

你想写这个的方式是：

<script>
$(document).ready(function() {
    setTimeout(function() {  
      $("#form-content").modal('show'); //this will show your modal
    }, 300); // milliseconds

    $("button#submit").click(function(){ //this will handle the form submission upon clicking the submit button
            $.ajax({
            type:    "POST",
             url:    "process.php",
            data:    $('form.contact').serialize(),
            success: function(msg){
                       // $("#thanks").html(msg)
                          $("#form-content").modal('hide');    
                 },
            error: function(){
                alert("failure");
            }
           });
    });
});
</script>

setTimeout可以调用一个单独的函数来显示模态，但是你不能随意将一个ajax函数传递给fadeIn函数，因为该函数被设计为在动画完成时运行（这不会是#n;＆＃39;给用户任何填写表格的机会）。即便如此，当您在fadeIn方法中使用完整函数时，您可以使用逗号分隔淡入行为的持续时间与完整函数的持续时间，而不是在括号中使用逗号（仅限FYI）。

此外，虽然fadeIn可以工作，但Bootstrap有自己的显示和隐藏模态的方法。如上面的代码所示，使用.modal('show')方法可能更容易。

无论表单如何显示，您的点击处理程序都会处理表单提交，因此您不必担心重复ajax调用。

从javascript计时器显示的Bootstrap提交表单

1 个答案: