JQuery弹出等待状态框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 模态框(Modal)插件</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <script src="./jquery.min.js"></script>
    <script src="./bootstrap.min.js"></script>
</head>
<body>
    <h2>创建模态框(Modal)</h2>
    <!-- 按钮触发模态框 data-toggle="modal" data-target="#myModal" -->
    <button class="btn btn-primary btn-lg" id="setTable">
        开始演示模态框
    </button>
    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="true">
        <div class="modal-dialog" style="display: outline-block;">
            <span style="font-family: Arial, Helvetica, sans-serif;"><!--设置模态框属性--></span>
            <div class="modal-content" style="width: 400px;height: 80px;margin-top: 220px;margin-left: 130px;">
                <!--设置模态框content属性-->
                <div class="modal-header" style="text-align:left;font-size: small;height: 8px;margin-bottom: 5px;">
                    <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        x
                    </button>-->
                    <p style="margin-top: -10px;">正在初始化Lucene</p>
                </div>
                <div class="modal-body" style="text-align: center;font-size: large;height: 18px;">
                    <p style="margin-top: -15px;">请稍候...</p>
                </div>
            </div><!-- /.modal-content  -->
        </div><!-- /.modal -->
    </div>
    <script type="text/javascript">
        $(function () {
            $('#setTable').click(function () {
                $.ajax({
                    type: 'POST',
                    url: 'https://localhost:5001/article/initlucene',
                    //data: {dbTypeId: dbTypeId, jdbcIp: jdbcIp} ,
                    dataType: 'json',
                    beforeSend: function () {       //ajax发送请求时的操作,得到请求结果前有效
                        $('#myModal').modal({
                            backdrop: 'static'      //<span style="color:#FF6666;">设置模态框之外点击无效</span>
                        });
                        $('#myModal').modal('show');   //弹出模态框
                    },
                    complete: function () {            //ajax得到请求结果后的操作
                        $('#myModal').modal('hide');  //隐藏模态框
                    },
                    success: function (msg) {//返回的数据格式 {"code":1,"msg":"Lucene初始化成功"}
                        if (msg.code == 1) {
                            alert(msg.msg);

                        } else {
                            alert(msg.msg);
                        }
                    }
                });
            });
        })
    </script>
</body>
</html>
源码下载链接: https://pan.baidu.com/s/1_FW23eGV9vYRGtcnEazTQA 提取码: rajw
转载请保留http://www.luofenming.com/show.aspx?id=ART2019121500001
效果图

评论