个人中心
gpt4 book ai didi

javascript - Bootstrap 4 Modal 由 ajax 调用打开 - 关闭按钮不起作用

转载 作者：行者123 更新时间：2023-11-30 11:24:53 26 4
gpt4 key购买 nike

我的 Bootstrap 模态有问题。我正在使用 $.ajax 调用，因此我可以将 POST 数据发送到单独的 .php 文件，以显示在打开的模式中。我一直在使用 Bootstrap 3，我没有任何错误，但是当我升级到 Bootstrap 4 时，我的模式不会关闭。

最初我在 StackOverflow 上发现了使用 show.bs.modal 的技术，因为我正在研究构建我的网站。为了测试目的，我尽可能简化了我的代码，所以我可以在这个问题中复制它。在下面的代码中，标题为“Launch demo modal”的按钮将打开和关闭，但“Launch ajax demo modal”只会打开(我必须刷新才能让它消失)。

我非常努力地遵循 Bootstrap 关于如何安排链接和对它们的库的引用的建议。请注意，show.bs.modal“on”函数中包含一个名为 test-modal.php 的文件。

请在下面查看我正在尝试的精简测试代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

    <link rel="icon" href="http://si.hclibrary.org/wp-content/uploads/2017/02/Icon_SmallSi-01.png" sizes="32x32">
    <title>HCLS IT Helpdesk Request Site</title>
</head>

<body>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
  Launch ajax demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
  <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>
</div>

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

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

<script>
$( document ).ready(function() {
    $('#exampleModal2').on('show.bs.modal', function(e) { 
        $.ajax({
            type:'post',
            url:'test-modal.php',
            data:{
                id:"id",
                type:"type"
            },
            success:function(data) {
                $('#exampleModal2').html(data);
            }
        });
    });
});
</script>

</body>
</html>

我的 test-modal.php 文件非常简单:

  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Ajax 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>

有没有其他人遇到过模态窗口无法正常关闭的问题？ Bootstrap 4 中是否有某些已弃用的内容，因此它不应该像以前那样工作？还是有其他方法可以将 POST 变量发送到打开的模态？我已经坚持了很长时间，非常感谢所有建议。如果我应该包含更多信息，请告诉我。

最佳答案

不要替换整个模态标记...

由于事件处理程序在加载时由 Bootstrap 绑定(bind)，如果您“替换”它们，新元素将不会被绑定(bind)，因为 Bootstrap 已经运行。

只需在 Ajax success 回调中使用 $('#exampleModal2 .modal-body').html(data); 加载模态主体。

如果你想改变标题，你可以使用:

$('#exampleModal2 .modal-title').html("Ajax loaded this new title.");

如果您需要从服务器资源发送标题和正文内容，请查找 JSON 数据响应。

JSON 数据格式将允许您一次发送多个“数据”。
;)

关于javascript - Bootstrap 4 Modal 由 ajax 调用打开 - 关闭按钮不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48388299/

26 4 0
文章推荐： javascript - 如何创建服务并在 Controller 中使用它
文章推荐： swift - 更改 Ramotion/Fluid 的 slider 最小值和最大值
文章推荐： swift - 实现 "floating bubble"对象的最佳方法
文章推荐： javascript - 内容可编辑的字数，包括默认文本
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com