Question

我使用这个简单的Bootstrap 4 Modal： https://getbootstrap.com/docs/4.0/components/modal/#modal-components

我用这个标签显示模态：

<a href="#" data-toggle="modal" data-target="#exampleModal">

模态显示正确。

Modal有2个按钮（取消和保存更改）。如何触发保存按钮按下以执行某些操作然后关闭模式？

Answer 1

检查一下。

bootstrap modal alert, confirm

function confirmModal(message, callback) {
    var confirmIndex = true;

    var newMessage = message.replace(/(?:\r\n|\r|\n)/g, "<br>");
    $('#modal_confirm_dialog_body').html("" + newMessage + "");
    $('#modal_confirm_dialog').modal('show');

    $('#confirm_cancle').on("click", function() {
        if(confirmIndex) {
            callback(false);
            $('#modal_confirm_dialog').modal('hide');
            confirmIndex = false;
        }
    });

    $('#confirm_ok').on("click", function() {
        if(confirmIndex) {
            callback(true);
            $('#modal_confirm_dialog').modal('hide');
            confirmIndex = false;
        }
    });
}

<html>
<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</head>
<script>
function alertModal(message) {
    var newMessage = message.replace(/(?:\r\n|\r|\n)/g, "<br>");
    $('#modal_alert_dialog_body').html("" + newMessage + "");
    $('#modal_alert_dialog').modal('show');
}

function confirmModal(message, callback) {
    var confirmIndex = true;

    var newMessage = message.replace(/(?:\r\n|\r|\n)/g, "<br>");
    $('#modal_confirm_dialog_body').html("" + newMessage + "");
    $('#modal_confirm_dialog').modal('show');

    $('#confirm_cancle').on("click", function() {
        if(confirmIndex) {
            callback(false);
            $('#modal_confirm_dialog').modal('hide');
            confirmIndex = false;
        }
    });

    $('#confirm_ok').on("click", function() {
        if(confirmIndex) {
            callback(true);
            $('#modal_confirm_dialog').modal('hide');
            confirmIndex = false;
        }
    });
}

$(document).ready(function () {
 $("#run_alert").click(function() {
  alert("Alert sample");
 });

 $("#run_confirm").click(function() {
  if(confirm("Confirm sample?")) {
   alert("OK");
  } else {
   alert("Cancel");
  }
 });

 $("#run_alert_modal").click(function() {
  alertModal("Modal Alert sample");
 });

 $("#run_confirm_modal").click(function() {
  confirmModal("Modal Confirm sample?", function(confirm) {
   if(confirm) {
    alertModal("OK");
   } else {
    alertModal("Cancel");
   }
  });
 });
});
</script>
<body>

   <div class="col-sm-12 text-center">

  <br><br>

  <button type="button" class="btn btn-secondary" id="run_alert">Alert</button>
  <button type="button" class="btn btn-secondary" id="run_confirm">Confirm</button>

  <br><br>

  <button type="button" class="btn btn-primary" id="run_alert_modal">Modal Alert</button>
  <button type="button" class="btn btn-primary" id="run_confirm_modal">Modal Confirm</button>

  <br><br>

   </div>

</body>

<!-- modal alert, confirm dialog { -->
<!-- alertModal -->
<div class="modal fade" id="modal_alert_dialog" role="dialog" aria-labelledby="modal_alert_dialog_label" aria-hidden="true" style="z-index: 8192">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal_alert_dialog_label">
        </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modal_alert_dialog_body" align="center">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>
<!-- confirmModal -->
<div class="modal fade" id="modal_confirm_dialog" role="dialog" aria-labelledby="modal_confirm_dialog_label" aria-hidden="true" style="z-index: 8192">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal_confirm_dialog_label">
        </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modal_confirm_dialog_body" align="center">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="confirm_cancle">Cancle</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="confirm_ok">OK</button>
      </div>
    </div>
  </div>
</div>
<!-- modal alert, confirm dialog } -->

</html>

Bootstrap模态确认动作

1 个答案: