Question

我知道这个问题已被多次回答，但我的问题不同。

我正在使用启用iframe的bootstrap模式扩展（dialog2 https://github.com/yorch/jquery-bootstrap-scripting）。我正在尝试在页面加载时加载模态。它使用普通方法无效。

页面尝试加载模态，出现叠加但没有模态，当我点击页面时

JS

$(window).load(function(){
    $('#test').modal('show');
});

$(document).ready(function() {
  $(".dialog-iframe").dialog2IFrame(    {
          height:900,
          closeOnOverlayClick: true, 
          closeOnEscape: true, 
          removeOnClose: true, 
          showCloseHandle: true,

    });
        focussed:true
        });

HTML链接

<a id="test" href="'.$url.'/popupviewresponse/'.$responses->response_id.'/'.seoUrl($responses->title).'" onclick="return loaded;"  class="dialog-iframe desktop-iframe" title="'.ucfirst($responses->title).'" >'.ucfirst($responses->title).'</a>

Answer 1

~~您使用哪个扩展程序在dialog2中启用iframe。我找到了一个（或一些代码）：Setting iframe width via Javascript。~~我发现：https://github.com/yorch/jquery-bootstrap-scripting/blob/master/lib/jquery.dialog2.iframe.js使用这些代码中的一些我可以在页面加载时使用iframe打开模态，请参阅：{{3} }

   <button id="framedialog" href="http://www.streetart.nl/">Open</button>

此按钮用于保存您要在href属性中的iframe中加载的网址。

加载iframe，隐藏按钮并单击打开对话框：

 $('#framedialog').hide().dialog2IFrame();
 $('#framedialog').hide().trigger('click');

修改后的扩展名：

/*  
* jQuery Dialog2 IFrame
* 
* Licensed under the MIT license 
* http://www.opensource.org/licenses/mit-license.php 
* 
* @version: 0.0.1 (09/06/2013)
* 
* @requires jQuery >= 1.4 
* 
* @requires jQuery.dialog2 plugin >= 1.1
* 
* @modified by Bass Jobsen (bass@w3masters.nl)
* @original author Jorge Barnaby (jorge.barnaby {at} gmail.com)
*/
(function ($) {

    /*
    * Shows a web page (using iframe) in a jQuery dialog2 (Bootstrap style).
    *
    */
    $.fn.dialog2IFrame = function (options) {
        options = $.extend({}, $.fn.dialog2IFrame.defaults, options);
        $(this).click(function (e) {
            e.preventDefault();
            var idDialogOuter = "dialog-iframe-outer";
            var $dialogOuter = $('#' + idDialogOuter).length ?
                $('#' + idDialogOuter) :
                $('<div id="' + idDialogOuter + '"></div>').hide().appendTo(document.body);
            var $dialogFrame = $('iframe', $dialogOuter).length ?
                $('iframe', dialogOuter) :
                $('<iframe frameborder="0" />').appendTo($dialogOuter);


            // Adds URL to iframe src
            $dialogFrame.attr('src', $(this).attr('href'));

            $dialogOuter.css('overflow', 'hidden').css('padding', '0').css('margin', '0');

            $dialogOuter.dialog2(
            {
                autoOpen: true,
                closeOnOverlayClick: options.closeOnOverlayClick,
                closeOnEscape: options.closeOnEscape,
                removeOnClose: true,
                showCloseHandle: options.showCloseHandle,
                initialLoadText: "Loading..."
            });

            var $dialog = $dialogOuter.parent();

            $dialog.addClass(options.additionalClass);

            // Removes footer if empty
            $footer = $dialog.find('.modal-footer');
            //console.log($footer.text().length);
            if ($footer.text().length == 0) {
                $footer.remove();
            }

            // Sets the iframe width and height to the same as the modal (must be done at the end)
            $dialogFrame.width($dialogOuter.width()).height($dialogOuter.height());
        });
    }

    $.fn.dialog2IFrame.defaults = {
        height: "900",
        additionalClass: "",
        // Appends &iframe=true to URL opened on IFrame
        appendParamUrl: false,
        // Reloads main page when modal is closed
        reloadOnClose: false,
        closeOnOverlayClick: false,
        closeOnEscape: false,
        showCloseHandle: false,
        close: function () {
            return true;
        }
    };
})(jQuery);

使用dialog2在页面加载时打开Twitter的Bootstrap 2.x模式

1 个答案: