it-swarm.com.ru

Как отобразить URL в модальном диалоговом окне Bootstrap: при нажатии кнопки

Я должен загрузить страницу (внутренний URL) в модальном окне. Я использовал window.showModalDialog (url, null, features), но это не работает должным образом в Safari, Chrome. Поэтому мы решили использовать модальный диалог Bootstrap. Я не могу сделать эту работу. Есть идеи, что я могу делать не так?

    //imports
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">


    //activate content as modal
      $(document).ready(function(){
            $('#test_modal').modal({

                });
    }

    .......
    .......

    $("#btnSubmit").click(function(){
     var url = constructRequestURL();
      $('#test_modal').modal(data-remote=url,data-show="true");
    });


    -----
    -----
    <div class="modal fade" id="test_modal">
</div>
7
agentx

Если вы собираетесь продолжить путь начальной загрузки, вы можете посмотреть здесь: jsfiddle - удаленный URI в Bootstrap 2.3.2 модальный

Обратите внимание, что URL-адрес должен быть в том же домене (хотя вы упомянули, что он «внутренний»), или ваш домен должен быть разрешен настройками Access-Control-Allow-Origin удаленного сайта. Так что имейте в виду, что демонстрационная версия скрипта не может загружать контент с сайта example.com.

<button type="button" class="btn" data-toggle="modal" data-target="#myModal" data-remote="http://example.com">Launch modal</button>

<div id="myModal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
       <!-- remote content will be inserted here via jQuery load() -->
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

Вам не нужно писать какой-либо специальный JavaScript для этого - Bootstrap будет знать, что делать, основываясь на таких атрибутах данных, как data-remote = "http://example.com/whwhat" и data-target = "# myModal" и т.п.

См. Соответствующий раздел Модальные документы Bootstrap для получения дополнительной информации ...

Edit: Оказывается, что динамическое изменение удаленного URL-адреса не так просто, как могло бы быть. Надеемся этот ответ поможет вам в дальнейшем.

12
codebyren

В качестве альтернативы вы можете использовать модную коробку. Это просто и чисто.

Посмотрите здесь: http://fancyapps.com/fancybox/3/docs/#ajax

<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;">
AJAX content

0
Ram Pratap