单击HREF时不显示模式弹出窗口

Question

我正在调用带有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搞砸了吗？当我将模式更改为显示的容器时，但显示方式很差，我真的需要模式，我做错了吗？

Answer 1

本身使用的代码应该可以正常工作，没有任何问题。将data-target属性添加到锚标记中，然后查看其是否有效。

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

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

Answer 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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer 3

您可以使用数据目标打开模式：

<a href="javascript.void(0)" data-toggle="modal" data-target="#test" class="more-link"></a>