Question

我正试图在从下拉菜单中点击时弹出一个模态。如果我将它链接到顶级链接，它会弹出正常。将其移动到下拉菜单后，所有屏幕都显示为暗淡。

<div class="collapse navbar-collapse" id="navigation">
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#friends">Our Friends</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#Characters">Characters</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="dropDownMenu" href="#locations" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Locations</a>

                <div class="dropdown-menu" aria-labelledby="dropDownMenu">
                    <a class="dropdown-item" href="#">Michigan</a>
                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#modal">Wisconsin<span class="caret"></span></a>
                    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="accountModalLabel" aria-hidden="true">
                        <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>
                                    <h5 class="modal-title" id="accountModalLabel">Wisconsin</h5>
                                </div>
                                <div class="modal-body">
                                    <p>Lorem Ipsum</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" data-dismiss="modal">Save Changes</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="dropdown-item" href="#">Minnesota</a>
                    <a class="dropdown-item" href="#">Wisconsin</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">International</a>
                </div>
            </li>   
        </ul>
    </div>

Answer 1

您需要将模态窗口保留在导航栏之外。然后只有它才能完美运作

<div class="collapse navbar-collapse" id="navigation">
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#friends">Our Friends</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#Characters">Characters</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="dropDownMenu" href="#locations" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Locations</a>

                <div class="dropdown-menu" aria-labelledby="dropDownMenu">
                    <a class="dropdown-item" href="#">Michigan</a>
                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#modal">Wisconsin<span class="caret"></span></a>
                    <a class="dropdown-item" href="#">Minnesota</a>
                    <a class="dropdown-item" href="#">Wisconsin</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">International</a>
                </div>
            </li>   
        </ul>
    </div>

    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="accountModalLabel" aria-hidden="true">
        <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>
                    <h5 class="modal-title" id="accountModalLabel">Wisconsin</h5>
                </div>
                <div class="modal-body">
                    <p>Lorem Ipsum</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" data-dismiss="modal">Save Changes</button>
                </div>
            </div>
        </div>
        </div>

链接在下拉列表中时会弹出一个模态弹出窗口

1 个答案: