关闭后,Bootstrap模态不会按键重新打开

时间:2018-05-03 10:09:49

标签: javascript jquery twitter-bootstrap bootstrap-4

所以我目前有一个twitter bootstrap模式的代码:

   <!-- Button trigger modal -->
      <button type="button" class="btn btn-success btn-lg btn-block" id="confirm" data-toggle="modal" data-target="#myModal" style="margin: auto; margin-top: 60px; cursor: pointer;">
        Confirm
      </button>

      <!-- Modal -->
      <div class="modal" id="myModal" role="dialog">
        <div class="modal-dialog modal-dialog-centered w3-animate-bottom" style="max-width: 1000px !important;">
          <div class="modal-content" style="border-radius: 10px; padding: 20px;">
            <div class="modal-header" style="background-color: white; color: black; text-align: center;">
              <h3 style="padding: 8px;"><strong>Confirm Credentials</strong></h3>
                <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <div class="row">
                  <div class="col-sm-5">
                    <strong>Borrower ID:</strong>
                  </div>
                  <div class="col-sm-5">

                  </div>
                  <div class="w-100"></div>
                </div>
            </div>
            <div class="modal-footer" style="background-color: white; color: black;">
              <div class="text-center" id="footmsg" style="float: left; text-align: left;">
                <p>Are you sure you want to submit?</p>
              </div>
              <span style="width: 20px;"></span>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
              <button type="button submit" class="btn btn-success" id="submitter" style="cursor: pointer;">Submit</button>
            </div>
          </div>
        </div>
      </div>

我尝试通过JQuery的enter键处理可以启动模态的部分。这是代码:

    $(document).on('keydown', function(event) {
        var key=event.which;
        if (key==13) {
             $('#confirm').click();
        }
    });

它基本上做的是它点击应该启动假设模态的按钮。所以我尝试了它,它第一次工作。但是,当我点击模态内部的按钮会关闭模态时,在尝试再次按下回车时,没有任何反应。我该怎么办?

1 个答案:

答案 0 :(得分:0)

我已经解决了。显然,基于https://getbootstrap.com/docs/3.3/javascript/,有一个.modal(&#39; show&#39;)函数可以按照我想要的方式完成。