jQuery UI对话框中的iFrame会导致父级的水平滚动条

Question

jQuery UI对话框中的iFrame会导致父级的水平滚动条

mke*_*bbs 1 iframe jquery jquery-ui jquery-ui-dialog

我正在使用jQuery UI对话框在新的iFrame中显示内容.一切都很好,除了对话框的父窗口在显示对话框时获得水平滚动条(IE8).我已经将问题追溯到iFrame中的<html>元素被浏览器解释为非常宽,即使是580px div中iFrame页面上的唯一内容.

我已经尝试将CSS添加到iFrame中的HTML和BODY标签(例如宽度:98%或宽度:600px;)......其中没有一个似乎有任何影响.

打开对话框的代码如下.有什么建议？

$("a[providerId]").click(function(e) {
                e.preventDefault();
                var $this = $(this);
                var $width = 600;
                var $height = 400;
                $('<iframe id="companyDetail" class="companyDetail" style="padding: 0px;" src="' + this.href + '" />').dialog({
                    title: $this.attr('title'),
                    autoOpen: true,
                    width: $width,
                    height: $height,
                    modal: true,
                    resizable: false,
                    autoResize: true,
                    overlay: {
                        opacity: 0.5,
                        background: "black"
                    }
                }).width($width).height($height);
            });

Run Code Online (Sandbox Code Playgroud)

更新:看看这些演示,我得到了代码,看看我在说什么(在IE8中):http://elijahmanor.com/demos/jqueryuidialogiframe/index.html

Answer 1

Rik*_*kki 6

这似乎是jQuery UI 1.7.2中的一个小错误,目前有一个关于这个问题的开放票证(#3623).票证评论中提出了两种解决方案:

解决方案A.

修改jquery-ui-1.7.2.custom.css:

找到.ui-widget-overlay.
添加以下规则:position:fixed;.

解决方案B.

修改jquery-ui-1.7.2.custom.min.js:

addClass("ui-widget-overlay").css({width:this.width(),height:this.height()});在第97行找到.
删除.css({width:this.width(),height:this.height()}).

归档时间：	15 年，9 月前
查看次数：	13577 次
最近记录：	10 年，5 月前