Question

页面回发时，我将页面变灰并打开微调器加载器(onclick call turnon function)。在CHROME中，回发后，旋转加载程序将停止旋转，但是在FIREFOX浏览器中，旋转加载程序仍在旋转并且不会停止。回发后如何正确关闭微调器加载器。

此外，我灰白的CSS不包含页面标题部分，为什么？

代码

<style>

 #loader-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    //background-color: white;
    filter:alpha(opacity=50); /* IE */
    opacity: 0.5; /* Safari, Opera */
    -moz-opacity:0.50; /* FireFox */
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 3px solid transparent;
    border-top-color: #3498db;
    z-index: 1500;
    border-radius: 50%;

    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    border-radius: 50%;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;

}

#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 3px solid transparent;
    border-top-color: #f9c922;
     border-radius: 50%;

-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}


/* include this only once */
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
</style>

<%
    if request("btnProcess") <> "" then
       '== Some code here to process

       do while x < 10000000
            x = x + 1
       loop

    '*** I actualy have this that maybe cause Firebox for still loading th spinner ****** 
    pParam = " Process Completed! " 
    response.write "<script language='javascript'>"
    response.write "window.alert ('" & pParam & "');"
    response.write "window.history.back();"
    response.write "</script>"   
   '*****************************************
    end if   

 %>

 <body class="hold-transition skin-blue sidebar-mini" onload="turnoff();">

 <!--this is for page greyed out and spinning loader-->                     
 <div id="loader-wrapper" style="display:none">
     <div id="loader"></div>
 </div>

 <div class="wrapper">

       <!-- #include file="include/header.asp" -->
       <!-- Left side column. contains the logo and sidebar -->
       <!-- #include file="include/sidebar.asp" -->

       <form name="Form1" class="form-horizontal" action="lnprocess.asp" method="post">
            <div class="box box-info">   
                <div class="box-body">
                    <div class="form-group">
                         <div class="col-sm-4"></div>
                             <div class="col-sm-7">
                                  <input type="SUBMIT" name="btnProcess" value="Process" style="width: 90px; margin-right: 10px" onclick="turnon();">
                               </div>
                          </div>
                     </div>
                </div>
           </div>
     </form>
 </div>

 <script>

 $(window).load(function(){    //=== TRIED THIS SUGGESTED BY @Adam BUT NOT WORKING
 //$(document).ready(function(){ //====== When Page finish loading

    //=== Call the spinner to stop here? =====
    document.getElementById("loader-wrapper").style.display = "none";

  });

    function turnon(){
         document.getElementById("loader-wrapper").style.display = "";
    }

    function turnoff(){
        document.getElementById("loader-wrapper").style.display = "none";
    }

 </script>

HTML Javascript CSS ASP经典-FIREFOX中的BACKBACK后

0 个答案: