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”)

选择具有给定id属性
的单个元素

使用

$("#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();
}

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

1 个答案: