Html 如何使用锚标记打开模态页面?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/31250364/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I use an anchor tag to open a modal page?
提问by Andrew Kilburn
I have an anchor tag in my navbar which I'd like to use to open up a modal form as a helper page. I have used the default W3Schools modal form just to test it it works. However nothing opens, I know it has something to do with the href. But i'm just not sure how to point the href to a modal form.
我的导航栏中有一个锚标记,我想用它来打开一个模态表单作为帮助页面。我使用默认的 W3Schools 模态表单只是为了测试它是否有效。但是什么也没有打开,我知道它与href有关。但我只是不确定如何将 href 指向模态表单。
HTML:
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">×</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>
How can I do this?
我怎样才能做到这一点?
回答by Andrew Kilburn
Found it.
找到了。
<li>
<a data-target="#myModal" data-toggle="modal" class="MainNavText" id="MainNavHelp"
href="#myModal">HELP</a>
</li>
Just needed to set the id to the href
.
只需要将 id 设置为href
.