Bootstrap模态框无法显示

Question

我想测试Bootstrap模态框元素并创建了一个小的测试页面。但是什么也没有显示出来，我想知道为什么，有任何提示吗？我从bootstrap页面获取了源代码...我的测试页面位于http://ronhome.no-ip.org/bootstrap/modal.html

- stdcerr

---

我自己也遇到了这个问题。在我的情况下，我有一些具有相同对话框名称的类似页面。我添加了一个新的对话框，但是jQuery无法获取我的对话框，因为它是不同的DOM。密集、重复的DOM会导致问题。 - micahhoover

Answer 1

首先，您需要包含jQuery，并使用按钮触发模态窗口 -

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

或使用 jQuery 显示 Bootstrap 模态框 -

<script type="text/javascript">
$(document).ready(function(){
    $('.modal').modal('show');
});
</script>

- Anil Saini

Answer 2

您的例子中未包含jQuery。

Uncaught Error: Bootstrap requires jQuery 

在引入Bootstrap之前，您必须先包含jQuery。

此外，Bootstrap模态框需要通过页面上的某种控件或JavaScript进行切换：http://getbootstrap.com/javascript/#modals-usage 这意味着您需要一个带有相应数据属性的按钮，该属性对应于在模态框上设置的属性，或通过JavaScript执行。

通过JavaScript： $('.modal').modal('show')

或通过控件上的属性： 启动模态框 编辑： 如果您使用控件，请将目标指定为模态div的ID。

<div id="myModal" class="modal fade">
   <!--modal content here -->
</div><!-- /.modal -->

- damienc88

---

我按照你说的做了，但仍然没有显示出任何东西：http://ronhome.no-ip.org/bootstrap/modal.html - stdcerr

首先，在引用Bootstrap之前，您需要引用JQuery。您还需要为模态框div赋予与按钮data-target中放置的ID相同的ID。请查看我在答案中的编辑。 - damienc88

Answer 3

在引入Bootstrap之前，您需要先引入jQuery。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

- Kaleidoscope

Answer 4

在我的情况下，当我这样做时，引导模型没有显示出来。

$('#myModal').show();

但是我修改了上面的代码，改成了下面的代码，然后它就能工作了。

$('#myModal').modal('show');

- Shravan Ramamurthy

Answer 5

在加载bootstrap javascript文件之前，先加载jQuery javascript文件！
希望它能正常工作。

- Reza Amya

Answer 6

我不知道这是否有帮助。

我尝试了很多小时，使用了很多提示。最终，我在模态框的类中添加了"bg-dark"，它有效了。

所以我改变了

<div id="myModal" class="modal fade" role="dialog">

转化为：

<div id="myModal" class="modal fade bg-dark" role="dialog">

- Raghnall

Answer 7

我认为你应该添加这个CDN。

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

- Praboda Sankalpa

Answer 8

所以，这对我有用：

记得检查你的项目中所有的依赖项，包括正确版本的bootstrap和jquery。

<button type="button" class=" btn rounded-3 add-new-client-btn" id="" data-bs-toggle="modal" data-bs-target="#exampleModal"> Your Button Here</button>

在按钮中留空id，并将模态框添加到代码末尾：

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                    ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

注意：这可能会根据您使用的Bootstrap版本而更改，始终请检查https://getbootstrap.com/docs/5.1/components/modal/#modal-components

- Matheus Cardoso

---

在这个答案中，我使用的是 Bootstrap v5.1。 - Matheus Cardoso

Answer 9

我正在使用Bootstrap v5.1.0版本。 .modal(); 命令无法工作。 使用 .modal('show') 命令可以正常工作。screenshot

- Erkan Salihoğlu