1

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

我已经尝试将 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);
            });

更新：查看我得到代码的这些演示，看看我在说什么（在 IE8 中）：http ://elijahmanor.com/demos/jqueryuidialogiframe/index.html

4

4 回答 4

6

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

解决方案 A

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

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

解决方案 B

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

  1. 在第 97 行查找addClass("ui-widget-overlay").css({width:this.width(),height:this.height()});。
  2. 删除.css({width:this.width(),height:this.height()})。
于 2009-12-12T05:52:35.857 回答
1

我的第一个想法是overflow-x : hidden，在我的情况下，在标准模式和怪癖模式下的 IE8 中，它可以解决问题，单杠消失。你需要做的就是把它放在身体标签上。

于 2009-12-13T06:46:05.963 回答
0

我有同样的问题。在我的情况下，对话框是 body 的子对象，我使用以下脚本来防止溢出：

$("#your-dialog").dialog({
  //our options,
  open: function(){
    $("body").css("overflow", "hidden");
  },
  close: function(){
    $("body").css("overflow", "initial");
  }
});
于 2015-03-17T13:33:18.000 回答
0
  • 如果仅在显示模式 ui 时发生，请检查控制负责覆盖的 div 的 css。
  • 还要检查您的文档类型。
  • 你试过玩overflow:hidden 吗？

将 url 发布到问题的在线演示会有所帮助。

于 2009-12-06T19:17:15.550 回答