等待模态框

效果图：
点击“加载页面”按钮，显示等待条，3秒后等待条消失
【Jsp】常用功能合集
项目结构

index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>等待效果</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<style>
.loading {
    width: 160px;
    height: 56px;
    position: absolute;
    top: 40%;
    left: 45%;
    line-height: 56px;
    color: #fff;
    padding-left: 60px;
    font-size: 15px;
    background: #000 url(images/loading.gif) no-repeat 10px 50%;
    opacity: 0.7;
    z-index: 9999;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.loadingmodal{width:100%;height:100%;position:absolute;top:0px;left:0px;visibility:hidden;}
</style>
 
<script type="text/javascript">
	function  HtmlLoad(url){
	    $('#loadingmodal').css("visibility","visible");
		//3秒后隐藏
		setTimeout(function () { $('#loadingmodal').css("visibility","hidden");}, 3000);
	}
</script>
</head>
<body>
        <button  onclick="HtmlLoad()">加载页面</button>
   
        <div id="loadingmodal" class="loadingmodal">
            <div  class="loading">加载中。。。</div>
        </div>
</body>
</html>

loading.gif
【Jsp】常用功能合集

【Jsp】常用功能合集

文章目录

等待模态框

相关推荐