bootstrap 模态框

candy_no_sweets

已于 2023-12-19 16:16:21 修改

阅读量354

点赞数 11

文章标签： bootstrap 前端 javascript

于 2023-12-19 16:15:50 首次发布

本文链接：https://blog.csdn.net/candy_no_sweets/article/details/135087151

版权

  <div class="modal" id="inFoModal" tabindex="-1" role="dialog" aria-labelledby="inFoModalLabel" aria-hidden="true">
      <div class="modal-dialog eqModal">
          <div class="modal-content">
              <div class="modal-header text-left">
                  <span class="modal-title" id="inFoModalLabel">
                      提示
                  </span>
                  <button type="button" class="close btn-sm" data-dismiss="modal" aria-hidden="true"
                      style="color: #FFF">
                      &times;
                  </button>
              </div>
              <div class="modal-body" id="info-modal-body">
                  <!-- 提示框文本 -->
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-danger" data-dismiss="modal">否</button>
                  <button type="button" class="btn btn-primary border-primary" id="agree">是</button>
              </div>
          </div><!-- /.modal-content -->
      </div><!-- /.modal -->
  </div>

    //调用提示框 调用文本，回调函数
            let inFoModal = $('#inFoModal');
    function showInfoModal(html, callback) {
        let height = window.innerHeight;
        let itemHeight = 400;
        let top = (height - itemHeight) / 2;
        top = top < 0 ? 0 : top;
        inFoModal.css('top', top + 'px');
        inFoModal.modal('show');
        inFoModal.draggable({
            handle: ".modal-header"
        });
        $("#info-modal-body").html(html);
        $("#agree").unbind("click").click(callback);
    }

调用接口
 function delZip(id) {
            function callback() {
                inFoModal.modal('hide');
                $.ajax({
                    "url": ‘’,
                    "type": 'POST',
                    "contentType": 'application/x-www-form-urlencoded',
                    "dataType": 'Json',
                    "data": { id: id },
                    "success": function (result) {
                        if (result['code'] === 1) {
                            success_prompt(result['message'], 1000);
                        } else {
                            warning_prompt(result['message'], 1000);
                        }
                        render(pageData);
                    },
                    "error": function () {
                        fail_prompt("连接失败...", 1000);
                    },
                });
            }

            showInfoModal("<h5>是否确认删除该条数据？</h5>", callback);
        }