如何使用 Bootstrap 模态使用注册的锚标签？

Question

我有一个导航栏的锚标记列表。我想在单击 "Register" 时打开一个模式。这是代码：

 <li><a href="@Url.Action("Login", "Home")">Login</a></li>
 <li><a href="#"> data-toggle="modal" data-target="modalRegister"> Register</a></li>

<div id="modalRegister" 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" style="text-align-last: center">Register</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

我通常使用按钮打开模式，但由于 <a href""></a>，我不太确定如何使用 <a></a> 标签打开它。我怎样才能达到结果？

Answer 1

您必须修改以下行：

<li><a href="#" data-toggle="modal" data-target="modalRegister">Register</a></li>

modalRegister 是 ID，因此需要在 html.

中引用前面的 # 作为 ID 参考

因此，修改后的 html 代码片段如下：

<li><a href="#" data-toggle="modal" data-target="#modalRegister">Register</a></li>

Answer 2

https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

注意：对于 <a> 元素，省略数据目标，并使用 href="#modalID" 代替。

Answer 3

直接替换：

<li><a href="" data-toggle="modal" data-target="#modalRegister">Register</a></li>

而不是：

<li><a href="#" data-toggle="modal" data-target="modalRegister">Register</a></li>

Answer 4

这里是 W3Schools 的 link 回答你的问题 https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

注意：对于锚标记元素，省略 data-target，并使用 href="#modalID" 代替：

希望对您有所帮助

Answer 5

这是您的代码

<li><a href="#"> data-toggle="modal" data-target="modalRegister"> Register</a></li>

在您的代码中，您必须进行如下更改

<li><a href="#" data-toggle="modal" data-target="#modalRegister"> Register</a></li>

如何使用 Bootstrap 模态使用注册的锚标签？

How to use Bootstrap modal using the anchor tag for Register?

html

modal-dialog

twitter-bootstrap

bootstrap-modal