请帮帮我。我花了很多时间来解决这个问题而没有任何成功。以下加载模式框在除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;
}