使用引导模式在 iframe 中调用页面？答案

【问题标题】：call page in iframe with bootstrap modal?使用引导模式在 iframe 中调用页面？
【发布时间】：2014-03-10 09:19:02
【问题描述】：

我使用this Bootsrap 模态插件并在其中调用一些页面。当页面需要回发或重定向时，它不会发生在模态中，它会更改页面。所以我希望它在 iframe 中以 boostrap 模式显示页面。

这是我的模态函数。代码;我应该如何修改它以在 iframe 中显示内容？

$.fn.modal.defaults.spinner = $.fn.modalmanager.defaults.spinner =
      '<div class="loading-spinner" style="width: 200px; margin-left: -100px;">' +
        '<div class="progress progress-striped active">' +
          '<div class="progress-bar" style="width: 100%;"></div>' +
        '</div>' +
      '</div>';

    $.fn.modalmanager.defaults.resize = true;

    var $modal = $('#ajax-modal');

    $('.modal-edit').on('click', function () {
        // create the backdrop and wait for next modal to be triggered
        $('body').modalmanager('loading');

        var edit = $(this).attr("data-id");
        setTimeout(function () {
        $modal.load('User.aspx?edit=' + edit + '', '', function () {
            $modal.modal();
        });
        }, 100);
    });

这是我的模态模态 div：

  <div id="ajax-modal" class="modal fade" tabindex="-1" data-width="760" data-replace="true">
  </div>

【问题讨论】：

标签： javascript jquery twitter-bootstrap iframe bootstrap-modal

【解决方案1】：

试试这个；

    $('.modal-edit').on('click', function () {
            // create the backdrop and wait for next modal to be triggered
            $('body').modalmanager('loading');
            var edit = $(this).attr("data-id");
            setTimeout(function () {
                $modal.on('show', function () {
                    $('iframe').attr("src", 'Customer_User.aspx?edit=' + edit + '');
                });
                $modal.modal()
                //$modal.load('Customer_User.aspx?edit=' + edit + '', '', function () {
                //    $modal.modal();
                //});
            }, 100);
        });


<div id="ajax-modal" class="modal fade" tabindex="-1" data-width="760" >
                        <iframe ></iframe>
                    </div>

【讨论】：