Question

无论出于何种原因，即使相同的代码在几天前工作，我的jquery加载覆盖在任何情况下根本都不会加载。好吧，不是完全相同的代码。我一直试图让叠加层用窗口调整大小，我一直在尝试不同的东西，但我不明白我做了什么导致叠加层从未出现过？这是应该叠加到正确的div ...

的代码

function MRNSearchInternals()
{
    //debugger;
    var form = $("#MRNSearch");
    $div = $("#TabView1");
    var srlzdform = form.serialize();
    var PopID = <% =PopID %>;
    var options = [];
    var $url = $("#target").attr("action");
    $('<div id="overlay">').css({
        position: 'absolute',
        opacity: 0.2,
        top : $div.offset().top,
        left : $div.offset().left,
        width : $div.offset().width,
        height : $div.outerHeight(),
        background: 'blue url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center'
    }).hide().appendTo($div);    

    $("#overlay").fadeIn();
    $.post('<%:Url.Action("SearchByMRN", "PatientACO")%>', srlzdform, function (data) 
    {                   
        DisplayDemographicSearch(data);
        $("#overlay").fadeOut();
    });
}

注意我是如何创建div的。我给它一个id，然后我称之为css属性。从那里我设置了所有的css属性。然后我尝试在ajax调用之后调用fadeIn和fadeOut。任何人都知道为什么这不起作用？任何帮助都会很棒。

更多澄清

另请注意我如何选择div来叠加。我从我的dom获得了一个div id

    $div = $("#TabView1");

另外，我查看了源代码，我确实在那里有特定的div。所以这不是问题。不知何故，它根本就没有出现。 更新：我获得的DOM 下面是从jquery代码生成的内容。似乎一切都被创造得很好。另请注意，该显示设置为none。这是我所期望的，因为我有覆盖淡出。我的问题是为什么它永远不会出现。

<div class="TabView" id="TabView1">
    <div class="Tabs">...</Tabs>
    <div class="Pages">
    <div id="overlay" style="left: 114px; top: 205px; height: 452px; display: none; position: absolute; opacity: 0.2; background-image: url("/images/ajax-loader.gif"); background-attachment: scroll; background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: blue;"/>
</div>

Answer 1

嗯，创建叠加div的更好方法是

$('<div/>', {
    id: 'overlay'
})

这可以解决问题吗？否则，可能无法创建ID，或者是否已创建ID？

从帖子更新编辑内容：未在创建的叠加层上设置"width"属性。如果将其添加并设置为例如，会发生什么？ 100px的？看起来宽度属性的设置有问题（或得到$ div的width属性）。

Answer 2

此代码是否被多次调用？如果是这样，你在某处删除了#overlay吗？

多次调用此代码会创建重复的#overlay dom节点，这是一个禁忌，并且可以解释为什么它有时不起作用。

要删除它，请更改：

$("#overlay").fadeOut();

为：

$("#overlay").fadeOut('slow', function () {
    $("#overlay").remove();
});

Answer 3

您的选择器看起来不正确。

我会尝试：

$（ '＃叠加'）。CSS。。。

Answer 4

function MRNSearchInternals()
{
    //debugger;
    var form = $("#MRNSearch");
    $div = $("#TabView1");
    var srlzdform = form.serialize();
    var PopID = <% =PopID %>;
    var options = [];
    var $url = $("#target").attr("action");
    $('<div id="overlay">').css({
        position: 'absolute',
        opacity: 0.2,
        top : $div.offset().top,
        left : $div.offset().left,
        width : $div.offset().width, //<- The problem is right here should be $div.width
        height : $div.outerHeight(),
        background: 'grey url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center'
    }).hide().appendTo($div);    

    $("#overlay").fadeIn();
    $.post('<%:Url.Action("SearchByMRN", "PatientACO")%>', srlzdform, function (data) 
    {                   
        DisplayDemographicSearch(data);
        $("#overlay").fadeOut('slow', function () {
             $("#overlay").remove();
        });
    });
}

曼。这真的很难调试。我希望Visual Studio 2010具有更好的jquery调试功能。值得庆幸的是，下一个版本应该是一个更好的jquery调试器。但是，问题是width属性。

我的jquery加载叠加层并没有显示出来

4 个答案: