Creating a modal dialog on the fly in Bootsrap3

Question

Is there any way I can create on the fly a modal dialog starting from a DOM node or a AJAX call?

Right now, I have to put

<!-- 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 -->

```

I would like something like

<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()

Also, BootBox does this.