拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 Bootstrap模态隐藏功能不起作用

Bootstrap模态隐藏功能不起作用

白鹭 - 2022-03-25 2085 0 0

我使用带有 OK/Cancel 按钮的 Bootstrap 模式对话框。我希望在单击 OK 后完成一些作业,然后关闭模式对话框。所以我用JS来处理OK点击。

HTML:

      <div class="modal fade" id="RequestModal" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="RequestModalLabel">Confirm to submit below request?</h5>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="button" class="btn btn-primary" id="btn_close" onclick="f_test()">OK</button>
            </div>
          </div>
        </div>
      </div>

JS

function f_test () {
      var myModal = new bootstrap.Modal(document.getElementById('RequestModal'));
      myModal.hide();
}

隐藏功能不起作用。我搜索了stackoverflow和其他人,但没有得到好的答案。

uj5u.com热心网友回复:

你很亲密。先创建模态对话框的物件,然后用它隐藏在f_test()方法上,如下图,

 var myModal = new bootstrap.Modal(document.getElementById('RequestModal'));
 myModal.show();

function f_test () {

   myModal.hide();
}

JSFiddle:https ://jsfiddle.net/78n9k65L/

标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *