Twitter Bootstrap 2 模态表单对话框

Posted 2023-02-22

【中文标题】Twitter Bootstrap 2 模态表单对话框

【英文标题】：Twitter Bootstrap 2 modal form dialogs

【发布时间】：2012-03-10 02:03:52

【问题描述】：

我有以下对话框：

<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>，表单关闭，让我留在当前页面，而我想进入主页。

还有“添加标签”按钮，即<div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div> 不要什么都不做，而点击键盘上的 jaust ENTER 来完成这项工作，我想点击“添加标签”做同样的事情。

我对 JS 和前端编程不是很熟练，所以欢迎任何帮助。

【问题讨论】：

谢天谢地，Bootstrap 2.0.2 introduced the modal-form class 允许您将 modal-header/modal-body/modal-footer 包装在 form 标记中来解决此问题，正如您所期望的那样！有关详细信息，请参阅this answer。

@TheCloudlessSky 感谢升级

【参考方案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;
);

【讨论】：

感谢 TheShellfishMeme，x 关闭工作正常链接 href='home.html' 就像你说的和提交工作从功能的角度来看，但点击后无法关闭表单...

您是要关闭模态还是转到home.html？

当我单击“提交按钮”以及单击 ENTER 时，我希望它关闭模态（更新输入）并转到 home.html（单击 x 时只是转到到 home.html 并且已经像你之前建议的那样工作了：x)

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

感谢您对 TheShellfishMeme 的支持，但模态表单仍然没有关闭，无论是在按下“Enter”之后还是在单击按钮之后。我需要一种方法来调试它并查看它在哪里失败/停止/不被评估......，知道吗？

【参考方案2】：

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

我的解决方案是添加：

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

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

【参考方案3】：

使用 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 中调用 form-associated element 当然，如果您需要支持所有浏览器 + 旧浏览器，那么您需要使用 JavaScript，但您可以使用 JavaScript 作为后备:)

【讨论】：

haml 中按钮的代码：%input.btn.btn-primary(name='commit' type='submit' value="Add tag" form='my_form')跨度>

【参考方案4】：

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

<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 introduced the modal-form class 来解决这个问题，或者您可以使用如下样式定义自己修复它：

.modal > form 
    margin-bottom: 0;

对于在关闭模式时链接到另一个页面我同意 TheShellfishMeme

至于应该链接到主页的×，为什么不直接删除 data-dismiss='modal' 并使用标准的 href='home.html' 使其像普通链接一样。

【讨论】：

有一个名为modal-form 的类可以为您删除底部边距 - read more

@stephenmurdoch - 谢谢！我已经更新了答案以反映新课程。

【参考方案5】：

仅供参考，您可以执行以下操作（用玉写）：

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

【讨论】：

原问题没有使用 Jade，所以这个答案没有帮助