<!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
效果图