Twitter Bootstrap 2模式表单对话框

您的提交按钮在表单标记之外
它不知道该提交什么表格。

使用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;
});

要获得提交按钮，请将其放入表单中。

<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

至于应该链接到主页的×，为什么不删除数据disse='mod'，并使用标准的href='home.html'使其表现得像一个正常的链接呢？

使用HTML5，您可以拥有以下内容：

<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作为后备：）

提交表单的问题存在于bootstrap自己的JS模态库（bootstrap moder.JS）中-由于第204行：ev.preventDefault，基本提交事件被阻止（为什么？）。

我的解决方案是添加：

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

但是我不知道会产生什么问题。

FYI您可以执行以下操作（用玉石编写）：

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