模式对话框已加载但不可见

Question

我试图做一个模态。我使用AJAX显示模态，但模态是不可见的。当我将按钮的触发器与数据切换和数据目标一起使用时，模态显示为可见。

这是我试图做的

检查所有脚本是否正确加载
试图重新排序脚本
删除模态中的淡入淡出类，并且模态可见，但UI不好
更改引导程序版本，但结果相同

这是我的代码

AJAX

$("body").on("click", ".btn-show", function (event) {
  event.preventDefault();

  var me = $(this),
    url = me.attr("href"),
    title = me.attr("title");

  $("#modal-title").text(title);

  $.ajax({
    url: url,
    dataType: "html",
    success: function (response) {
      $("#modal-body").html(response);
      $("#modal").modal("show");
    },
  });
});

HTML模式

<div class="modal fade" id="modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header" id="modal-header">
        <button type="button" class="close" data-dismiss="modal"
                aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="modal-title">Form Input</h4>
      </div>

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

      <div class="modal-footer" id="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary" id="modal-btn-save">Save
          changes
        </button>
      </div>
    </div>
  </div>
</div>

SS模式存在但不可见：

Answer 1

模态没有错误，$("#modal").modal("show");显示模态也很好（请参见下面的代码片段，]，>

由于下面的代码段可以正常工作，所以很明显，永远不会调用原始代码的“成功”功能：

success: function (response) {
  $("#modal-body").html(response);
  $("#modal").modal("show");
}
我建议在ajax parameters中添加错误函数：

error: function (jsXHR, textStatus, errorThrown) {
  // handle error here
}
来自jQuery文档：

错误
类型：函数（jqXHR jqXHR，字符串textStatus，字符串errorThrown）如果请求失败，则要调用的函数。

function showModal() {
  $("#modal-title").text('Sample Title');
  $("#modal-body").html('Sample Response');
  $("#modal").modal("show");
}<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<!-- scripts needed by Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<body class="p-2">
  <button onclick="showModal()">Show Modal</button>

  <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header" id="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
          <h4 class="modal-title" id="modal-title">Form Input</h4>
        </div>

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

        <div class="modal-footer" id="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
          <button type="button" class="btn btn-primary" id="modal-btn-save">Save
          changes
        </button>
        </div>
      </div>
    </div>
  </div>
</body>

模式对话框已加载但不可见

问题描述投票：0回答：1

1个回答

最新问题

模式对话框已加载但不可见

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1