【问题标题】:Overlay not working when I upgrade to jQuery 1.12.1升级到 jQuery 1.12.1 时覆盖不起作用
【发布时间】:2016-12-23 09:29:02
【问题描述】:

早安,

我正在将我的 Web 应用程序系统 jQuery 升级到版本 1.12.1。发现overlay在新的jQuery版本中不起作用。

我正在使用 ajax 弹出一个带有叠加层的对话框。这是我的ajax代码:

$.ajax({
        async: false,
        url: locurl,
        data: dataPackage,
        success: function(result){
            createServiceModel();
            $("#viewService").dialog({
                height: 645,
                width: 720,
                resizable: false,
                modal: true,
                autoOpen: true,
                bgiframe: true,
                overlay: {
                    opacity: 0.4, 
                    backgroundColor: "black"
                }
            });

                $("#serviceContent").append(result);
         },
         error: function (xhr, ajaxOptions, thrownError){
            if(xhr.status==403) alert("You are not allowed to proceed due to changes in your profile. Please re-log in again.");
            else alert("Connection Error. Please try again later. If error persisted, please contact System Administrator.");
        }
    });

这在我的旧 jQuery 上运行良好。

这是我从 Chrome 调试模式复制的 html 代码:

<div class="ui-dialog-overlay" style="border-width: 0px; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 1343px; height: 628px; opacity: 0.4; background-color: red; z-index: 1001;"></div>

<div class="ui-dialog ui-draggable" tabindex="-1" 
    style="display:block;position:absolute;width:720px;height:645px;overflow:hidden;z-index:1002;outline:0px;top:5px;left:311.5px;;;">
    <!-- other html code here -->
    </div>

我发现ui-dialog-overlay其实可以从ui.dialog.js找到。

但是,当我升级到 jQuery UI 1.12.1 后,发现 jquery-ui.js 中不再存在ui-dialog-overlay,而是变成了ui-dialog-overlays

我从http://jqueryui.com/download/下载了最新的jQuery js文件

是 ajax 代码中的overlay 语法变化吗? 我尝试通过在其上添加“s”来更改overlay

overlays: {
            opacity: 0.4, 
            backgroundColor: "black"
        }

但还是不行。

请多多指教。

【问题讨论】:

  • 删除async: false
  • @RoryMcCrossan,其实我之前试过,没用。
  • 它可能无法解决眼前的问题,但无论如何你都应该这样做,因为使用async: false 是非常糟糕的做法。如果您检查控制台,您甚至会看到警告,告诉您不要使用它
  • 如果您还没有升级 jQueryUI 版本,可能也值得升级
  • 嘿,这里有同样的问题..无法让它为我的生活工作..你最终有什么解决方案吗?

标签: javascript jquery html ajax jquery-ui


【解决方案1】:

早安,

我找到了自己的解决方案。

我不应该只升级 jQuery。但我需要升级 jQuery UI 和 css 文件。

对于这种情况,我遇到这个问题是因为我的ui.dialog.css仍然是旧版本,并且覆盖类名称不匹配,这就是覆盖功能不起作用的原因。

升级 ui.dialog.css 后,我的问题解决了。

【讨论】:

  • 谢谢。这解决了我在升级 jquery-ui 时遇到的一个非常相似的问题。我忽略了包含升级后的 css,导致对话框被阻止。
猜你喜欢
  • 1970-01-01
  • 2018-07-30
  • 2013-05-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-07-27
相关资源
最近更新 更多