CODEWITHSUNDEEP
javascriptasp.netc#-3.0
Code Vader
Code Vader

Reputation: 755

Closing a popup created via Javascript from codebehind

I'm having some trouble closing down a modal that I create in javascript. The idea is to show a loading circle while data is being retrieved, and then hide it once it's done in the background. Everything works fine untill I try to hide it. Nothing seems to happen? It just hangs there...

enter image description here

Javascript for showing/hiding the loading circle:

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

Code behind to show/hide:

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

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

Upvotes: 0

Views: 34

Answers (1)

Satpal
Satpal

Reputation: 133453

As you have defined the ID of dynamically created element. Use ID Selector (“#id”)

Selects a single element with the given id attribute

Use

$("#loadingCircle2")

instead of

$find("loadingCircle2")

You have not set the ID property properly, as its id and modal is a jQuery object also you are not appending the loading element to modal.

Complete Script

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

Upvotes: 2

Related Questions