bootstrap-modal - 如何将 Bootstrap 模态组件与 Phoenix 集成？

Question

我不喜欢 phoenix_html 当前用于删除确认的阻止浏览器确认对话框。 .鉴于 Phoenix 默认附带 Bootstrap，我如何集成 Bootstrap modal component与 Phoenix ？

Answer 1

如果(且仅当)jQuery 可用并且存在合适的 DOM 元素时，我已将此对话委托(delegate)给 Bootstrap 模式组件。

复制此modal.js要点 web/static/js Phoenix 项目中的文件夹。

注释掉 import "phoenix_html"输入 web/static/js/app.js

在 HTML 模板中包含 Bootstrap 模态组件的 HTML。 Bootstrap 文档建议:

Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.

确保您的 HTML 包含 id="phoenix-bs-modal"在顶层 <div class="modal"> ，以及一个主要(确认)按钮 <button class="btn-primary">存在于模态中:

<div class="modal fade" id="phoenix-bs-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

通过 data-confirm 传入的消息删除链接上的属性被转发到模态体。

这对我获得连贯的布局很有用。我将我的解决方案放在那里，因为希望它对其他人也有用。