logo标签列表

如何使用锚点标签打开模态框页面？

html
15

我在我的导航栏中有一个锚点标签，我想将其用作打开模态表单（帮助页面）的工具。我已经使用了默认的W3Schools模态表单进行测试，但是什么都没有打开，我知道这与href有关，但我不确定如何将href指向模态表单。

HTML：

 <div class="collapse navbar-collapse" id="PageNavigation">
                        <ul class="nav navbar-nav" id="NavigationLinks">
                            <li>@Html.ActionLink("DASHBOARD", "Index", "Dashboard", "", new { @class = "MainNavText", @id = "MainNavDashboard" })</li>
                            <li>@Html.ActionLink("EXPORT", "Index", "Dashboard", "", new { @class = "MainNavText", @id = "MainNavExport" })</li>
                            <li><a data-target="#myModel" data-toggle="modal" class="MainNavText" id="MainNavHelp">HELP</a></li>
                         </ul>
                        @Html.Partial("_LoginPartial")
                    </div>

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

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

我该怎么做？

1个回答
34

找到了。

<li>
    <a data-target="#myModal" data-toggle="modal" class="MainNavText" id="MainNavHelp" 
       href="#myModal">HELP</a>
</li>

只需要将id设置为href即可。

谢谢您的建议。我会保持现状，因为有些用户可能已经关闭了JavaScript。虽然这种情况的概率很小，但使用Bootstrap更容易。 - Andrew Kilburn
2
@AndrewKilburn 实际上，Bootstrap使用JS来打开模态对话框。如果用户关闭了JS，则Bootstrap和jQuery都无法工作。事实上，Bootstrap JS模块依赖于jQuery (https://github.com/twbs/bootstrap/blob/v4-dev/js/dist/modal.js#L534)。 - Daniel Reina
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接