weixin_33738578 2018-04-30 13:09 采纳率: 0%
浏览 170

Bootstrap 4 Ajax加载模式

I am migrating from BS3 to BS4.1

In my apps I do use ajax loaded modals.

In layout I have

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

Then button

<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>

and simple JS func

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

Func load for example this

<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>

So its makes a example modal togather. Thanks to data-toggle and target it auto opens the modal.

Problem is that close buttons dosen't work.

Same code was working in BS3.

Doesn anyone know how to solve this?

  • 写回答

1条回答 默认 最新

  • weixin_33709364 2019-08-27 08:07
    关注
    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>
    
    评论

报告相同问题?

悬赏问题

  • ¥15 fesafe材料库问题
  • ¥35 beats蓝牙耳机怎么查看日志
  • ¥15 Fluent齿轮搅油
  • ¥15 八爪鱼爬数据为什么自己停了
  • ¥15 交替优化波束形成和ris反射角使保密速率最大化
  • ¥15 树莓派与pix飞控通信
  • ¥15 自动转发微信群信息到另外一个微信群
  • ¥15 outlook无法配置成功
  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统