javascript - 关闭通过 Javascript 从代码隐藏创建的弹出窗口

Question

我在关闭用 javascript 创建的模式时遇到一些问题。这个想法是在检索数据时显示一个加载圆圈，然后在后台完成后隐藏它。一切都很好，直到我试图隐藏它。好像什么也没有发生？它只是卡在那里......

用于显示/隐藏加载圆圈的Javascript:

<style type="text/css">

.modal
{
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 99;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
}
.loading
{
    font-family: Arial;
    font-size: 10pt;
    border: 5px solid blue;
    width: 200px;
    height: 100px;
    display: none;
    position: fixed;
    background-color: white;
    z-index: 999;
}
</style>


<script type="text/javascript">
    function ShowLoadingCircle()
    {
        var modal = $('<div />');
        modal.ID = "loadingCircle2";
        modal.addClass("modal");           
        $('body').append(modal);
        var loading = $(".loading");
        var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
        var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
        loading.css({ top: top, left: left });
        loading.show();
    }

    function HideLoadingCircle()
    {
        var loadingCirlce = $find("loadingCircle2");
        loadingCirlce.hide();
    }
</script>

显示/隐藏的代码:

ScriptManager.RegisterStartupScript(this, this.GetType(), "Show Me", "setTimeout('ShowLoadingCircle()', 10);", true);

ScriptManager.RegisterStartupScript(this, this.GetType(), "Hide Me", "setTimeout('HideLoadingCircle()', 0);", true);

Answer 1

正如您已经定义了动态创建的元素的ID。使用ID Selector (“#id”)

Selects a single element with the given id attribute

使用

$("#loadingCircle2")

而不是

$find("loadingCircle2")

<小时/>

您没有正确设置 ID 属性，因为它的 id 和 modal 是 jQuery 对象，而且您没有附加 loading 元素到模态。

完整脚本

function ShowLoadingCircle()
{
    //Create DIV
    var modal = $('<div />', {
        "id" : "loadingCircle2",
        "class" : "modal",
    });        

    //Set loading 
    var loading = $(".loading");
    var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
    var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
    loading.css({ top: top, left: left });

    //Append the loading
    modal.append(loading);

    //Append the modal
    $('body').append(modal);
}

function HideLoadingCircle()
{
    $("#loadingCircle2").hide();
}