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

Question

有什么方法可以从 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>

Answer 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这样做。