Создание модального диалога "на лету" в Bootsrap3 - программирование
Подтвердить что ты не робот

Создание модального диалога "на лету" в Bootsrap3

Есть ли способ создать "на лету" модальный диалог, начинающийся с DOM node или 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>
4b9b3361

Ответ 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 делает это.