BootStarp3 模态框制作页面加载等待
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>
