如何使用Bootstrap模式使用锚标记进行注册?

Leb*_*one 18 html html5 modal-dialog twitter-bootstrap bootstrap-modal

我有一个导航栏的锚标签列表.我想在点击"注册"时打开一个模态.这是代码:

 <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>
Run Code Online (Sandbox Code Playgroud)

我通常使用一个按钮打开一个模态,但我不太确定如何使用<a></a>标签打开它,因为<a href""></a>.我怎样才能取得成果?

Sen*_*ram 40

您将不得不修改以下行:

<li><a href="#"> data-toggle="modal" data-target="modalRegister"> Register</a></li>
Run Code Online (Sandbox Code Playgroud)

modalRegister是ID,因此需要#在html中使用前面的ID引用.

因此,修改后的html代码片段如下:

<li><a href="#" data-toggle="modal" data-target="#modalRegister"> Register</a></li>
Run Code Online (Sandbox Code Playgroud)


小智 5

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

注意:对于<a>元素,请省略data-target,然后使用href="#modalID".

  • 请包含链接中的文字并在此处进行说明.一旦链接变得陈旧,你的答案就变得毫无用处. (5认同)