BootStarp3 模態框製作頁面載入等待
阿新 • • 發佈:2019-01-08
新建小專案,由於大量使用AJAX,為增強使用者體驗,需頁面等待效果。
效果截圖:
css圖片:
不能上傳附件~~ 只能貼程式碼了… js官網下載
具體程式碼:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>等待效果</title>
<link rel="stylesheet" href="../loading/bootstrap/css/bootstrap.min.css"
type="text/css">
<script type="text/javascript"
src="../loading/bootstrap/js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="../loading/bootstrap/js/bootstrap.min.js"></script>
<style>
.loading {
width: 160px;
height: 56px;
position: absolute ;
top: 50%;
left: 50%;
line-height: 56px;
color: #fff;
padding-left: 60px;
font-size: 15px;
background: #000 url(../loading/image/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);
}
</style>
<script type="text/javascript">
function HtmlLoad(url){
$('#myModal').modal('show');
setTimeout(function () {
$('#myModal').modal('hide');
}, 3000);
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<button id="load" onclick="HtmlLoad()">載入頁面</button>
</div>
<div id="myModal" class="modal fade" data-keyboard="false"
data-backdrop="static" data-role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div id="loading" class="loading">載入中。。。</div>
</div>
</div>
</body>
</html>