Je souhaite ouvrir une modale lorsque je clique sur un lien ..__ Malheureusement, je n'ai pas pu modifier le code HTML du lien. Je ne pouvais que changer le contenu de href
.
Comme ça:
<a href="#Modal">Open modal</a>
Je ne pouvais pas ajouter d'attributs de données ni aucun autre HTML.
Dans la documentation, j'ai trouvé un moyen d'ouvrir le modal via JavaScript. J'ai ajouté ce code sur mon site:
$('#Modal').modal();
Cela fonctionne, mais le modal s'ouvre immédiatement après le chargement de la page ..__ Je dois l'ouvrir après avoir cliqué sur le lien.
Y a-t-il un moyen de faire cela?
Voici mon modal:
<div class="modal" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<p class="h5 modal-title" id="ModalTitle">Modal Title</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
Content
</div>
</div>
</div>
</div>
Déclenchez l'événement click sur a[href$="#Modal"]
.
$('a[href$="#Modal"]').on( "click", function() {
$('#Modal').modal('show');
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Trigger the modal with a button -->
<a href="#Modal" class="btn btn-info btn-lg">Open modal</a>
<!-- Modal -->
<div id="Modal" 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">×</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>
EIDT: modifié myModal en modal
besoin d’ouvrir après avoir cliqué sur le lien.
Vous devrez donc vérifier si le lien est cliqué.
jQuery fournit plusieurs façons de sélectionner un élément. http://api.jquery.com/category/selectors/
$('a[href$="#Modal"]').on( "click", function() {
$('#Modal').modal();
});`
Essaye ça
<!-- Trigger the modal with a button -->
<a href="#" class="btn btn-info btn-lg">Open Modal</a>
<!-- Modal -->
<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">×</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>
$('a').on( "click", function() {
$('#myModal').modal('show');
});