web-dev-qa-db-fra.com

Comment utiliser Bootstrap modal en utilisant la balise anchor pour Register?

J'ai une liste de balises d'ancrage pour ma barre de navigation. Je souhaite ouvrir un modal lorsque vous cliquez sur "Enregistrer". Voici le code:

 <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>

J'utilise normalement un bouton pour ouvrir un modal, mais je ne sais pas trop comment l'ouvrir avec la balise <a></a> à cause du <a href""></a>. Comment puis-je atteindre les résultats?

htmlhtml5twitter-bootstrapmodal-dialogbootstrap-modal
14
Lebone

Vous devrez modifier la ligne ci-dessous:

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

modalRegister est l'ID et nécessite donc un # précédent pour la référence d'ID en HTML.

Ainsi, l'extrait de code HTML modifié serait le suivant:

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

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

Remarque: Pour les éléments <a>, omettez data-target et utilisez plutôt href="#modalID".

5
Mtu

Voici un lien vers W3Schools qui répond à votre question https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

Remarque: pour les éléments de balise d'ancrage, omettez data-target et utilisez plutôt href = "# modalID":

J'espère que ça aide 

0
Raphael

Il suffit de le remplacer

<a href="" data-toggle="modal" data-target="#modalRegister"> Launch demo modal </a>

au lieu de 

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