Question

我正在使用Ajax将数据库中的数据加载到引导模式中。所有这些都很好。我的问题是，当我打开从数据库中加载所有信息的模式后，只要我在页面上打开另一个模式，它也会显示该模式主体。

模式：

<a href="javascript:void(0);" data-href="userInfo.php?id='.$user['uid'].'" id="openUserInfoModal">View</a>

<div class="modal fade" id="userInfoModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Info</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>
   </div>
</div>

Javascript：

  $(document).ready(function() {
      $('#openUserInfoModal').on('click',function(){
          var dataURL = $(this).attr('data-href');
          $('.modal-body').load(dataURL,function(){
              $('#userInfoModal').modal({show:true});
          });
      });
    });

Answer 1

您需要更直接地定位模态主体：-

$(document).ready(function() {
  $('#openUserInfoModal').on('click',function(){
      var dataURL = $(this).attr('data-href');
      $('#openUserInfoModal .modal-body').load(dataURL,function(){
          $('#userInfoModal').modal({show:true});
      });
  });
});

我已经在您的JS第4行中添加了#openUserInfoModal。

Answer 2

尝试使用ID定义模态主体，然后在其上执行javascript代码

 <div id="modal-one" class="modal-body">

然后使用JavaScript转换

    $('#modal-one.modal-body').load(dataURL,function(){
          $('#userInfoModal').modal({show:true});
      });

将动态数据加载到模态主体中会影响所有其他模态主体

2 个答案: