twitter-bootstrap - 在第一个提交后加载相同的 twitter 引导模式

Question

我有一个具有表单的引导模式，它成功提交并获得成功消息，假设我想添加一个指向相同模式的链接以从当前打开的模式加载相同的表单。

当我单击链接时，模式隐藏了。

这是我链接到模态的链接。

<a class="registerBtn" data-toggle="modal" href="#registerModalForm" >Register</a>

谢谢

Answer 1

我解决这个问题的方法是将表单数据放在一个隐藏的 div 中（我们称之为它formData），它与模态 div 完全分开。例如：

<div id="formData" class="hide">
   <form href="#" action="post">
      Name: <input id="nameText" type="text"/>
      <a href="#" id="mySubmit" class="btn btn-primary">Submit</a>
   </form>
</div>

然后创建一个事件，这样当 modal 显示时，它会将表单数据加载到 modal 的 body 中：

$("#myModal").on("show", function() {
    // load the modal with content from the div formData
    $(".modal-body", this).html($("#formData").html());
});

最后，向重新加载表单的按钮添加一个事件（这里的按钮有一个 id = myReload：

$("body").on('click', 'a.btn-primary', function() {
      // A button with the class btn-primary was clicked. If this is the reload button
      // reload the HTML into the modal
      if ($(this).attr("id") == "myReload") {
                 $(this).parent().html($("#formData").html());
      }
});

JSFiddle 在这里。（忽略提交按钮的代码，这里只是模拟表单提交）。