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>
经验分享 程序员 微信小程序 职场和发展