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">×</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
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
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">×</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>