Discussion :

[surfeur22]

Bonjour,

J'aimerai afficher une modale qui prend tout l'écran :


https://getbootstrap.com/docs/5.1/components/modal/
<!-- Full screen modal -->

Appel de la modale avec mon bouton :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" name="btnModal" id="btnModal" class="btn btn-primary" value="loupe"/>

le script :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$(document).ready(function(){
 
	$('#btnModal').click(function(){
		$('#loupe').modal('show');	
 
	});
});

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="modal-dialog modal-fullscreen" id="loupe">
  ...
</div>

Cela ne fonctionne pas ?

[darkstar123456]

Bonjour,

Il n'y a que des bribes de code.
Quel est le soucis exactement ? La modal ne s'affiche-t-elle pas du tout ? S'affiche-t-elle mais pas correctement ?
Y a-t-il des erreurs dans la console ?
Avez-vous bien utilisé un code complet pour votre modal ?
Avez-vous bien loadé le fichier JS de Bootstrap ?

De plus, ll n'est pas nécessaire d'écrire du code Javascript pour ouvrir ou fermer une modal. Tout peut se faire via data-attribute.


Chez moi, l'exemple de la documentation fonctionne très bien en tout cas : https://codepen.io/DarkStar123456/pen/LYLYdaM

[surfeur22]

Jolie exemple !

J'avais plusieurs inclusions bootstrap.bundle.min.js dans ma balise head.

On les enlevant ça marche !

merci.