-1
votes

Pop up modal ne pas montrer quand on clique sur href

J'appelle une apparition modale avec une HREF et lorsque je clique sur, il est en désaccord pour appeler un modèle modal mais il ne fait que faire mon arrière-plan gris et cela ne montre rien. J'ai le code suivant: xxx

le clic href: xxx

suis-je en train de faire quelque chose de mal? C'est mon bootstrap CSS foiré? Lorsque je change les modaux en conteneurs, cela montre, mais cela montre de mauvaise manière et j'ai vraiment besoin des modaux, je fais quelque chose de mal?

html bootstrap-4 bootstrap-modal

1 commentaires

Travailler bien sans modification: - Jsfiddle.net/LALJI1051/TO027VHG/1

3 Réponses :

0
votes

Vous pouvez ouvrir modal à l'aide de la cible de données: xxx

1 commentaires

Pourquoi utilisez-vous javascript.void (0) ici? En le mettant, vous pouvez désactiver JavaScript! Soyez donc conscient avant de mettre une réponse.


                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Le code utilisé lui-même devrait fonctionner correctement sans aucun problème. Ajoutez l'attribut de la cible de données à votre étiquette d'ancrage et voyez si cela fonctionne. 
 Modifiez votre code de balise d'ancrage comme je l'ai mentionné ci-dessous. Cela devrait fonctionner correctement.  P> 
<a href="#test" data-toggle="modal" data-target="#test" class="more-link"></a>

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     J'ai testé dans ma machine locale et cela fonctionne bien, mais certaines propriétés CSS peuvent créer un problème comme celui-là. 
 Vérifiez certaines étapes  p> 

 Votre  z-index  code> est supérieur à votre corps ou tag parent  li>
 vous avez  cible de données  code> propriété de votre étiquette d'ancrage  li>
 doit inclure  jQuery & bootstrap.js  code> script dans votre fichier  li>
 ul>   EXEMPLE DE TRAVAIL  FORT>  P> 
  P> 


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">


<div class="modal fade" id="test" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Stackoverflow</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                HELLO MY PEOPLE
            </div>
        </div>
    </div>
</div>

<a href="#test" data-toggle="modal" data-target="#test" class="more-link">Open Modal</a>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

                                

                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    N'oubliez pas d'envisager de voter à nouveau et de vérifier cette réponse comme la meilleure réponse pour vous en cliquant sur la flèche droite, merci!