单击 HREF 时不显示模态弹出窗口答案

【问题标题】：Modal Pop Up not showing when clicking HREF单击 HREF 时不显示模态弹出窗口
【发布时间】：2020-03-05 14:46:52
【问题描述】：

我正在调用带有 HREF 的模态弹出窗口，当我单击它时应该调用一个模态，但它只会使我的背景变灰并且它什么都不显示。我有以下代码：

<div class="modal fade" id="test" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                HELLO MY PEOPLE
            </div>
        </div>
    </div>
</div>

HREF 点击：

<a href="#test" data-toggle="modal" class="more-link"></a>

我做错了吗？是我的引导 CSS 搞砸了吗？当我将 modals 更改为 Containers 时，它会显示，但它的显示方式很糟糕，我真的需要 modals，我做错了什么吗？

【问题讨论】：

无需任何更改即可正常工作：- jsfiddle.net/lalji1051/to027vhg/1

标签： html bootstrap-4 bootstrap-modal

【解决方案1】：

使用自己的代码应该可以正常工作，没有任何问题。将 data-target 属性添加到您的锚标记中，看看它是否有效。

如下所述，更改您的锚标记代码。这应该可以正常工作。

<a href="#test" data-toggle="modal" data-target="#test" class="more-link"></a>

【讨论】：

【解决方案2】：

我在本地机器上进行了测试，它工作正常，但某些 CSS 属性可能会产生类似的问题。

请检查一些步骤

您的z-index 大于您的正文或父标签
您的锚标记中有data-target 属性
必须在文件中包含jquery & bootstrap.js 脚本

工作示例

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">


<div class="modal fade" id="test" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Stackoverflow</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                HELLO MY PEOPLE
            </div>
        </div>
    </div>
</div>

<a href="#test" data-toggle="modal" data-target="#test" class="more-link">Open Modal</a>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

【讨论】：

不要忘记考虑投票并通过单击右箭头检查此答案是否为您的最佳答案，谢谢！

【解决方案3】：

您可以使用 data-target 打开模态：

<a href="#" data-toggle="modal" data-target="#test" class="more-link"></a>

【讨论】：

你为什么在这里使用javascript.void(0)？通过把它你可以禁用javascript！所以在给出任何答案之前要注意。