以 '$('#mymodal').modal('show') 不起作用 - Javascript' 作主题

这个问题通常出现在开发者想在页面中显示一个模态框，但是模态框并没有出现。这种情况可能是由于以下一些原因导致的：

1. jQuery 或 Bootstrap 没有被正确引用

在使用 jQuery 或 Bootstrap 的时候，必须确保正确引用了它们的 js 文件。可以在浏览器的开发者工具中检查 console 窗口，看看是否有类似于 "$ is not defined" 这样的错误。如果有，那么需要检查一下引用的 js 文件是否正确。

例如，以下代码演示了如何正确引用 jQuery 和 Bootstrap 4 的 js 文件：

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- 引入 Bootstrap 4 的 js 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>

2. 模态框的 id 名称不正确

在代码 '$('#mymodal').modal('show')' 中，'#mymodal' 是模态框的 id 名称，必须确保它与 HTML 中定义的 id 相符。如果名称不正确，那么模态框将无法正确显示。

例如，以下代码演示了一个正确的模态框 HTML 结构：

<!-- 模态框 HTML 结构 -->
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">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">
        <p>Modal body text goes here.</p>
      </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>

在这个例子中，模态框的 id 是 'mymodal'，所以在 JavaScript 代码中应该使用 '#mymodal'。

3. 模态框的 show 方法被多次调用

如果模态框的 show 方法被多次调用，那么可能会出现一些问题。为了避免这种情况发生，可以使用以下 JavaScript 代码：

if (!$('#mymodal').hasClass('in')) {
  $('#mymodal').modal('show');
}

这段代码将检查模态框是否当前显示中（通过检查类名 'in'），如果不是，则调用 show 方法。

4. 代码的执行时机不正确

最后，如果代码的执行时机不正确，也可能导致模态框无法正确显示。例如，如果在页面加载之前调用 '$('#mymodal').modal('show')'，那么模态框将无法正确初始化。

为了解决这个问题，可以使用 jQuery 的 ready 方法，这个方法会在页面加载完成后自动调用，确保 JavaScript 代码被正确执行：

$(document).ready(function() {
  $('#mymodal').modal('show');
});

以上就是解决 '$('#mymodal').modal('show') 不起作用' 这个问题的几个常见方法。请根据具体情况选择适合的方法来解决这个问题。