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

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

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

Answer 2

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

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

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

Answer 3

我在本地计算机上进行了测试，并且工作正常，但是某些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>

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

3 个答案: