Javascript bootstrap4ajax加载模式

Javascript bootstrap4ajax加载模式,javascript,jquery,html,ajax,bootstrap-4,Javascript,Jquery,Html,Ajax,Bootstrap 4,我正在从BS3迁移到BS4.1 在我的应用程序中,我确实使用ajax加载的modals 在布局上我有 <div class="modal fade" id="myModalToFillInfo" tabindex="-1" role="dialog" aria-labelledby="myModalToFillInfoLabel" aria-hidden="true"> </div> Func加载例如 <div class="modal-dialog" role=

我正在从BS3迁移到BS4.1

在我的应用程序中,我确实使用ajax加载的modals

在布局上我有

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

<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中工作

有人知道如何解决这个问题吗?

我们手动关闭引导模式,如
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>
情态标题 &时代; ... 接近 保存更改 $(“.closeModel”)。单击(函数(){ $('#AddQueModal').modal('toggle'); });
您的get请求事件是否在您的模型中加载了任何内容?我的意思是,将匿名函数分配给变量
showUserDetail
不同于命名函数
showUserDetail(id){}
No,函数与按钮完全相同-onclick=“showUserDetail(@id)”调用jquery函数showUserDetail=function(id){…}你是否将你的
.css
更新为你的
.js
引导文件?是的,从Scratch开始了一个新项目。我能想到的是,要么你的GET请求失败,要么无限循环,你可能没有捕获
失败(数据){
函数显示正确的返回,或者您只需强制重新加载浏览器即可从缓存中清除引导文件并下载最新版本。
<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>
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>