Twitter Bootstrap 2 模态表单对话框

Question

我有以下对话框表单：

<div class='modal' id='myModal'>
  <div class='modal-header'>
    <a class='close' data-dismiss='modal'>×</a>
    <h3>Add Tags</h3>
  </div>

  <div class='modal-body'>
    <form accept-charset="UTF-8" action="/tagging" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" /></div>
        <input id="tags_string" name="tags_string" type="text" value="luca" />
        <input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
    </form>
  </div>

  <div class='modal-footer'>
    <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div>
  </div>
</div>

以及他的JS：

<script>
  //<![CDATA[
    $(function() {
      // wire up the buttons to dismiss the modal when shown
      $("#myModal").bind("show", function() {
        $("#myModal a.btn").click(function(e) {
          // do something based on which button was clicked
          // we just log the contents of the link element for demo purposes
          console.log("button pressed: "+$(this).html());
          // hide the dialog box
          $("#myModal").modal('hide');
        });
      });
      // remove the event listeners when the dialog is hidden
      $("#myModal").bind("hide", function() {
          // remove event listeners on the buttons
          $("#myModal a.btn").unbind();
      });
      // finally, wire up the actual modal functionality and show the dialog
      $("#myModal").modal({
        "backdrop" : "static",
        "keyboard" : true,
        "show" : true // this parameter ensures the modal is shown immediately
      });
    });
  //]]>
</script>

当我点击 x（即 <a class='close' data-dismiss='modal'>×</a>）时，表单关闭并留在当前页面，但我希望跳转到首页。

此外，“Add tag” 按钮（即 <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div>）没有任何反应，但是通过键盘上的 ENTER 键可以实现相同的操作，我希望点击“Add tag”也有同样的效果。

我对 JS 和前端编程不太熟悉，所以需要任何帮助。

- Luca G. Soave

---

值得庆幸的是，Bootstrap 2.0.2 引入了 modal-form 类来解决这个问题，它允许你将 modal-header/modal-body/modal-footer 包裹在一个 form 标签中，正如你所期望的那样！请参考 这个答案 以获取更多细节。 - TheCloudlessSky

Answer 1

你的提交按钮在表单标签之外。
它不知道要提交哪个表单。
使用JavaScript将其连接到表单。

<div class='modal-body'>
    <form id="modal-form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
        <input name="something" value="Some value" />
    </form>
  </div>

<div class='modal-footer'>
    <a id="modal-form-submit" class='btn btn-primary' href="#">Submit</a>
</div>

<script>
  $('#modal-form-submit').on('click', function(e){
    // We don't want this to act as a link so cancel the link action
    e.preventDefault();

    // Find form and submit it
    $('#modal-form').submit();
  });
</script>

关于应该链接到主页的 <a class='close' data-dismiss='modal'>×</a>，为什么不只是移除 data-dismiss='modal' 并将其作为一个标准的链接使用，例如 href='home.html'。

以下是一些额外的代码，可以指导您如何使用 AJAX 提交表单：

// Since we want both pressing 'Enter' and clicking the button to work
// We'll subscribe to the submit event, which is triggered by both

$('#modal-form').on('submit', function(){

  //Serialize the form and post it to the server
  $.post("/yourReceivingPage", $(this).serialize(), function(){

    // When this executes, we know the form was submitted

    // To give some time for the animation, 
    // let's add a delay of 200 ms before the redirect
    var delay = 200;
    setTimeout(function(){
      window.location.href = 'successUrl.html';
    }, delay);

    // Hide the modal
    $("#my-modal").modal('hide');

  });

  // Stop the normal form submission
  return false;
});

- Tim

---

你想关闭模态窗口还是前往home.html页面？ - Tim

当我点击“提交按钮”或者只是按下回车键时，我希望它关闭模态框（更新输入）并跳转到home.html页面（而点击x则直接跳转到home.html，就像之前你建议的那样： <div class='close'><a href="/">x</a></div>）。 - Luca G. Soave

你基本上有两个选择： 要么使用AJAX提交表单，然后在完成后更改页面，要么在提交表单后从服务器发送重定向。 我认为你正在寻找第一种选项。 然后你可以提交表单，等待成功完成，关闭模态框，等待动画完成，然后重定向。 - Tim

很抱歉，你试过我编辑后的代码了吗？如果重定向起作用，那么问题可能出在模态框上。在我的代码中，我写了 #my-modal，但你使用了 #myModal。这可能是原因吗？ - Tim

不幸的是，该代码是由Rails 3.1助手+ Haml模板语言生成的，并且类似但并不相同。 - Luca G. Soave

Answer 2

将提交按钮放在表单内使其正常工作。

<div class="modal">
    <form id="modal-form" action="/tagging" data-remote="true" method="post">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>A Modal Form</h3>
        </div>
        <div class="modal-body">
            <input name="something" value="Some value" />
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Cancel</a>
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    </form>
</div>

然而，这将在模态框底部添加一个意外的边距。 Bootstrap 2.0.2引入了modal-form类来解决这个问题，或者您可以使用如下样式定义自行解决：

.modal > form {
    margin-bottom: 0;
}

为了在关闭模态框时链接到另一个页面，我遵循TheShellfishMeme的方式

至于应该链接到主页的×号，为什么不只是删除 data-dismiss='modal' 并使用标准的 href='home.html' 让它像普通链接一样工作呢。

- breigo

---

有一个叫做 modal-form 的类可以为您去除底部边距 - 阅读更多。 - stephenmurdoch

@stephenmurdoch - 谢谢您！我已经更新了答案以反映新类。 - TheCloudlessSky

Answer 3

HTML5可以实现类似以下的内容：

With HTML5 you can have something like this:

<div class="modal" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Add Tags</h3>
  </div>

  <div class="modal-body">
    <form id="my_form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
        <div style="margin:0;padding:0;display:inline">
          <input name="utf8" type="hidden" value="&#x2713;" />
          <input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" />
        </div>
        <input id="tags_string" name="tags_string" type="text" value="luca" />
        <input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
    </form>
  </div>

  <div class="modal-footer">
    <div class="btn btn-primary"><input name="commit" type="submit" value="Add tag" form="my_form" /></div>
  </div>
</div>

这被称为HTML5中的表单关联元素，当然如果您需要支持所有浏览器+旧版本，则需要使用JavaScript，但您可以将JavaScript用作备选方法 :)

- panosru

---

请提供 Haml 中按钮的代码： %input.btn.btn-primary(name='commit' type='submit' value="Add tag" form='my_form') - Costa Shapiro

Answer 4

提交表单的问题在于bootstrap自己的JS模态框库（bootstrap-modal.js），基本上由于第204行的ev.preventDefault导致提交事件被阻止了（为什么？）。

我的解决方案是添加：

if(!$(e.target).parents('form'))
   e.preventDefault();

然而，我不知道它会产生什么问题。

- eithed

Answer 5

提醒一下，你可以按照以下方式进行操作（使用jade编写）：

.modal.hide.fadel
  form.modal-form
    .modal-header
        button.close type='button' data-dismiss="modal" x
        h3= t 'translation'
    .modal-body
        p hello
    .modal-footer
        button.btn data-dismiss="modal" href="#" = t 'close'
        a.btn.btn-primary data-dismiss="modal" data-remote="true" href="#"= t 'form.submit'

- scottkf

---

原始问题没有使用Jade，因此这个答案并不有用。 - Craig Blaszczyk