Ouvrir une fenêtre Modale à partir de la barre de Navigation

Je suis en train d'ouvrir une fenêtre modale à partir de la barre de navigation. J'ai suivi de très bon tutoriaux et une fois que j'ai appuyé sur mon lien modale ouvert, le problème est le modèle de la fenêtre ressemble pas modifiable pour une raison quelconque, ne peut même pas fermer le X dans la fenêtre modale. La même fonctionne très bien en dehors de la barre de navigation.

Je voudrais savoir pourquoi cela se produit.

Mon code est comme suit:

<ul class="nav navbar-nav pull-right">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#" data-toggle="modal" data-target="#basicModal">Contact Us</a></li>
</ul>

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
            </div>
            <div class="modal-body">
                <h3>Modal Body</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">
                    Save changes
                </button>
            </div>
        </div>
    </div>
</div>

Capture d'écran:

Juste une pensée. Bootstrap est un composant spécial de l'alignement pour navbars. Au lieu d'utiliser tirez droit de le modifier à la barre de navigation à droite. Aligner la valeur liquidative des liens, des formulaires, des boutons, ou d'un texte, à l'aide de l' .barre de navigation de gauche ou de .barre de navigation à droite de l'utilitaire de classes. Les deux classes d'ajouter une propriété CSS float dans la direction indiquée. Par exemple, pour aligner nav liens, les mettre dans un autre <ul> avec l'utilitaire de classe appliqué. Ces classes sont mixin-ed versions de .pull-gauche et .pull droit, mais ils sont limités à des requêtes de média pour faciliter la manipulation de composants de barre de navigation à travers le dispositif de tailles.getbootstrap.com/components/#navbar

OriginalL'auteur optimus | 2014-05-15

html5 twitter-bootstrap

9

Ce qui est couvert dans la documentation officielle:

Modal de balisage de placement

Toujours essayer de placer un modal du code HTML dans un haut-niveau de poste dans votre document afin d'éviter d'autres composants qui influent sur la modale de l'apparence et/ou la fonctionnalité.

Mettre le <div> qui a le modal classe en dehors de la barre de navigation. Vous pouvez laisser le modal-déclenchement <a> dans la barre de navigation.

OriginalL'auteur cvrebert

<nav class="navbar bg-secondary">
        <div
            class="collapse navbar-collapse float-right" id="navcol-1" style="color:rgb(255,255,255);">
            <ul class="nav navbar-nav ml-auto" role="navigation">
                <li><a href="#myModal" data-toggle = "modal" data-target= "#myModal" class="nav-link">Contact us</a></li>
                </ul>
        </div>
    </div>
</nav>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content"> 
            <div class="modal-header">
                <h5 class="modal-title">For your Queries</h5> 
            </div>
            <div class="modal-body">
                IF you have any questions, Mess Manager Office number is <strong>+01234567890</strong> or you can email us by <strong>[email protected]</strong>>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss = "modal">Close</button>
            </div>
        </div>
    </div>
</div>

vraiment aidé moi merci

OriginalL'auteur Masood Ahmad

0

Je suis confronté à ce même problème. La seule façon que je puisse les corriger c'est par l'ajout d'un jQuery cliquez sur le lien dans la barre de navigation pour remplacer l'amorçage par défaut. Comme:
```
$("#navbar_register_btn").on("click",function(e){
    e.preventDefault();
    $('#basicModal').modal('show');
})
```
Vous aurez besoin de donner votre lien dans la barre de navigation un id de "navbar_register_btn" dans ce cas.

OriginalL'auteur RiaanP

  <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

OriginalL'auteur Dreyyy

Vous devez vous connecter pour publier un commentaire.

Modal de balisage de placement