在 Bootstrap 3 中动态创建模式对话框

Posted 2023-03-06

【中文标题】在 Bootstrap 3 中动态创建模式对话框

【英文标题】：Creating a modal dialog on the fly in Bootsrap3

【发布时间】：2013-10-27 10:31:13

【问题描述】：

有什么方法可以从 DOM 节点或 AJAX 调用开始动态创建模式对话框？

现在，我必须把

<!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </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 -->

```

我想要类似的东西

<img src='' id="x">
<script>
$('#x').modal(title:'Image',otherOption:true);
</script>

【问题讨论】：

您必须在您的第一个代码 sn-p 中完全创建 html 结构，将所需的正文插入到modal-body，然后将模式插入页面并显示它。或者，当您想要显示特定内容并显示模式时，您必须将这个 HTML 结构放在您的 DOM 中，隐藏并替换 modal-body 内容。

谢谢伊恩。你证实了我的恐惧:)

不过应该​​没什么大不了的。只需创建一个函数来创建模式（生成 HTML），添加特定内容（作为参数传递），并将其添加到页面 - 我过去做了一个来做这件事。当它关闭时，我也让它从 DOM 中移除。

@Ian，您能否发布该代码作为答案？我刚才也有同样的要求。

【参考方案1】：

var popupTemplate =
  '<div class="modal fade">' +
  '  <div class="modal-dialog">' +
  '    <div class="modal-content">' +
  '      <div class="modal-header">' +
  '        <button type="button" class="close" data-dismiss="modal">&times;</button>' +
  '        <h4 class="modal-title">I am a dialog</h4>' +
  '      </div>' +
  '      <div class="modal-body" />' +
  '      <div class="modal-footer">' +
  '        <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>' +
  '        <button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>' +
  '      </div>' +
  '    </div>' +
  '  </div>' +
  '</div>';

$(popupTemplate).modal()

另外，BootBox 也会这样做。

【讨论】：

示例有语法错误。 I'm a dialog 应该是 I\'m a dialog