时间戳

首页 > 解决方案 > Bootstrap 4 ajax 加载模式

javascript - Bootstrap 4 ajax 加载模式

问题描述

我正在从 BS3 迁移到 BS4.1

在我的应用程序中，我确实使用了 ajax 加载的模式。

在布局中我有

<div class="modal fade" id="myModalToFillInfo" tabindex="-1" role="dialog" aria-labelledby="myModalToFillInfoLabel" aria-hidden="true">
</div>

然后按钮

<button type="button" class="btn btn-primary" title="Informace o uživateli" onclick="showUserDetail(@u.Id)" data-toggle="modal" data-target="#myModalToFillInfo">
   <i class="fas fa-info" aria-hidden="true"></i>
</button>

和简单的 JS 函数

showUserDetail = function (id) {
    $.get('/Uzivatel/ModalUserInfo/' + id,
        function (data) {
            $('#myModalToFillInfo').html(data);
        });
}

函数加载例如这个

<div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>

因此，它使一个示例模态聚集在一起。由于数据切换和目标它自动打开模式。

问题是关闭按钮不起作用。

相同的代码在 BS3 中工作。

有谁知道如何解决这个问题？

标签： javascriptjqueryhtmlajaxbootstrap-4

解决方案

we manually close the bootstrap modal like

  <div class="modal" id="AddQueModal">
    <div class="modal-dialog" role="document">
  <div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    <button type="button" class="close closeModel" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data- 
  dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
  </div>
  </div>
 </div>

<script>
 $(".closeModel").click(function() {
    $('#AddQueModal').modal('toggle');
 });
</script>

推荐阅读