Firefox显示静态gif。在Internet Explorer中正常工作

时间:2014-04-06 21:33:33

标签: javascript firefox

请帮帮我。我花了很多时间来解决这个问题而没有任何成功。以下加载模式框在除FireFox之外的所有浏览器中都可以正常工作。在Firefox中,它显示静态gif图像而不是动画加载旋转。

HTML:

 <input type="submit" name="SubmitPayment" value="Complete Order" class="square checkout button" onclick="ShowProgressAnimation();" /> 

<div id="loading-div-background">
<div id="loading-div" style="display:none"><img style="margin:30px;" src="images/loading.gif"   alt="Loading.."/>

<p align="center" valign="middle" style="color:##1a0980; font-size:24px; font-weight:normal; text-align:center">Please Wait While We Are Processing Your Order....</p>

</div>
</div> 

Java脚本:

 <script type="text/javascript">
    $(document).ready(function () {
        $("#loading-div-background ").css({ opacity: 0.8 });

    }); 

    function ShowProgressAnimation() {           

        $("#loading-div-background").show();
    var pb = document.getElementById("loading-div");
    pb.innerHTML = '<img style="margin:30px;" src="images/loading.gif" alt="Loading.."/>'; 
    pb.style.display = '';  

    }


</script> 

的CSS:

#loading-div-background 
{
    display:none;
    position:fixed;
    top:0;
    left:0; 
    /* background:black; */
    background-color: #EDF1F4;
    width:100%;
    height:100%;
    z-index: 10000;
 }

#loading-div
{
     width: 400px;
     height: 200px;
     background-color: #EDF1F4;
     text-align:center;
     position:absolute;
     left: 50%;
     top: 50%;
     margin-left:-200px;
     margin-top: -100px;
 }

0 个答案:

没有答案