modal bootstrap

Par tallest, il y a 9 ans

Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

j'essai la classe modal de bootstrap.

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </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>

Ce que je veux

Je veux que la fenetre soit stable pour pouvoir creer un systeme de login

Ce que j'obtiens

Le probleme est que la fenetre vient et diaparait immediatemment...

3 réponses

Zigo Zigomario, il y a 9 ans

Bonjour,

J'ai simplement copié coller ton code sur un template html pour mes test classiques.
Et je n'ai aucun problème avec le modal. La fenêtre reste et se ferme uniquement au clic.

Je te conseil donc de regarder du coté de tes scripts js/css si il n'y a pas conflit

tallest, il y a 9 ans

comment puis savoir s'il ya conflit ou pas??

Zigo Zigomario, il y a 9 ans

Perso, je n'ai pas de méthodes magiques. Je regardes mes versions bootstrap, et je supprime un à un les autres scrips qui pouraient faire conflit. ( tes scripts perso ou autres librairies ).
Voici mon template. Des scripts non rien à voir à ton cas, mais en tout cas, sur ces version , ça passe.

<!DOCTYPE html> <html> <head> <title>test</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="jquery-ui-1121/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="BackgroundSlideshow/css/default.css" /> <link rel="stylesheet" type="text/css" href="BackgroundSlideshow/css/component.css" /> <script src="BackgroundSlideshow/js/modernizr.custom.js"></script> </head> <body> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </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> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="jquery-ui-1121/jquery-ui.js"></script> <script src="jquery.border.js"></script> <script src="test.js"></script> <script src="BackgroundSlideshow/js/jquery.imagesloaded.min.js"></script> <script src="BackgroundSlideshow/js/cbpBGSlideshow.min.js"></script> <script> $(function() { cbpBGSlideshow.init(); }); </script> </html>