javascript - 提交时关闭模式

Question

我有这个模式窗口，当你打开一个页面时会弹出。我在提交表单后关闭它时遇到问题。它用一个按钮关闭，当您在它外部单击时，但不知何故我无法用提交按钮关闭它。

我的脚本

var modal = document.getElementById('myModal');



var span = document.getElementsByClassName("close")[0];



span.onclick = function() {
  modal.style.display = "none";
}


window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

我想用来关闭模式的按钮。

<input type="submit" name="submit" value="Send" > </form>

标签： javascriptbootstrap-modal

Answer 1

利用elem.modal()

$('#myModal').modal('hide')

1. Bootstrap 需要一个 jquery 。所以最好使用 jquery 函数

$(document).ready(function() {
  $('#myModal').modal('show')
  $('form').on('submit', function(e) {
    e.preventDefault();
    $('#myModal').modal('hide')
  })
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Methods</h4>
      </div>
      <div class="modal-body">
       <form>
  <input type="submit" name="submit" value="Send"> </form>
      </div>
    </div>

  </div>
</div>