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

Question

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

Javascript for showing/hiding 加载圈：

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

show/hide后面的代码：

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

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

Closing a popup created via Javascript from codebehind

javascript

asp.net

c#-3.0