0
votes

Ouvrir modal dans le conteneur bootstrap sur la page de la page

J'utilise un module de bootstrap pour montrer une barre de progression tandis que de nombreuses images de la galerie vignettes préchargées. Le modal fonctionne bien, s'ouvrant automatiquement lorsque la page se charge et se cache lorsque la précharge est terminée. Cependant, le modal assombrit l'écran entier - au lieu de cela, je souhaite quitter la barre de navigation visible et darquement tout le reste. J'utilise shuffle.js pour trier et afficher des images de la galerie lorsque vous avez cliqué sur, et pour une raison quelconque, il affiche le modal de la manière dont je veux, mais je ne peux pas comprendre pourquoi et inverser ingénieur une solution. Voici ce que j'ai actuellement:

<div id="myModal" class="modal">
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

javascript jquery html css bootstrap-modal

3 commentaires

très sry je ne peux pas voir le code, pouvez-vous s'il vous plaît joindre votre code complet?

D'ACCORD. J'ai ajouté le code modal. Il y a aussi beaucoup de php et de javascript, mais je ne pense pas que ce soit pertinent. Sauf si vous pensez que je devrais le poster quand même?

J'ai donné ma réponse ci-dessous, vérifiez s'il est utile ou avez-vous besoin de plus de clarification,

3 Réponses :

0
votes

Travaillez-vous avec Bootstrap 4?

Démo p>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">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">
        <p>Modal body text goes here.</p>
      </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>

1 commentaires

Oui, bootstrap 4. J'ai modifié ma question avec le code modal. NOTE J'ai omis la barre de progression, car je n'ai pas encore fini de formater le formatage, et je ne pensais pas que c'était pertinent de toute façon. Merci.

1
votes

BOOTSTRAP utilise Modal-Backdrop Code> Classe pour MODALE avec Z-Index 1040. Vous pouvez donc configurer votre position NAVBAR sur Relative et son indice Z supérieure à 1040.

.yourNavbarClass{ 
 position:relative;
 z-index:1200;
 }

3 commentaires

Réglage de la position relative gâché ma page Formatage de la page, mais lorsque j'ai supprimé la position: relatif, il semble fonctionner. Pas la solution que j'attendais, mais merci!

@Kerrimyagmurcu Oui, nous pouvons utiliser Z-Index avec une position fixe, relative, absolue et collante.

Eh bien, je suis confronté à des problèmes sur Firefox avec des modaux et de la botte 4, car la plupart des fonctions indigènes telles que la toile de fond et les effets de disparition ne fonctionnent pas bien avec des navigations collées ... c'est une chose de firefox, je suppose :) @JUMAHMOHAMMAMMADI

0
votes

Est-ce la réponse que vous attendez. Affichage de div en avant même lorsque le modèle Bootstrap est ouvert. En réglant la position fixe et z-index supérieure à celle du modèle, vous y feriez. S'il vous plaît regarder le code être

Ceci n'est qu'un exemple, vous pouvez modifier le code comme vous le souhaitez p> blockQuote>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="textfront">
<h1>
this text will be visible even when model is shown
</h1>
</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">&times;</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>

0 commentaires