Bonjour,
J’ai une page mère qui ouvre une fenêtre modale fille sur un clic.
Quand je quitte cette fenêtre modale, la div parent qui occupait les 100% de l’écran se retrouve avec une taille réduite de 5% environ. Si je rouvre la fenêtre modale, en revenant sur ma page, je perds 5% de plus. Etc.
Ci-dessous extrait de la page.
Sauriez-vous à quoi est du ce désagrément ?
Merci
Modifié par soriro (28 Jan 2018 - 23:47)
J’ai une page mère qui ouvre une fenêtre modale fille sur un clic.
Quand je quitte cette fenêtre modale, la div parent qui occupait les 100% de l’écran se retrouve avec une taille réduite de 5% environ. Si je rouvre la fenêtre modale, en revenant sur ma page, je perds 5% de plus. Etc.
Ci-dessous extrait de la page.
Sauriez-vous à quoi est du ce désagrément ?
Merci
<style>
body{
margin : 2;
padding : 2em;
}
.parent{
position: relative;
}
img {
width: 100%; /* ---- Défini la largeur d'affichage de l'image sur laquelle on travaille ------*/
}
<style>
<div class="parent">
<img src="images/image.jpg">
<a data-toggle="modal" href="#" data-target="#modal" class="LienModal <? echo $variable1; ?> bulle" rel="<? echo $variable2 ; ?>"
….
</div>
<!—Pour ouvrir fenêtre modale --------->
<div id="modal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Détail de l'équipement</h4>
</div>
<div class="modal-body">
<p>Loading...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- Event modal -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(".LienModal").click(function(oEvt){
oEvt.preventDefault();
var Id=$(this).attr("rel");
$(".modal-body").fadeIn(1000).html('<div style="text-align:center; margin-right:auto; margin-left:auto">Patientez...</div>');
$.ajax({
type:"GET",
data: 'Id='+Id+'&Id2='+Id2+'&Id3='+Id3+'&Id4='+Id4+'',
url:"zoom.php",
cache: false, // retrait du cache
error:function(msg){
$(".modal-body").addClass("tableau_msg_erreur").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400).html('<div style="margin-right:auto; margin-left:auto; text-align:center">Impossible de charger cette page</div>');
},
success:function(data){
$(".modal-body").fadeIn(1000).html(data);
}
});
});
</script>
<!—Fin ouverture fenetre modale -------------------> Modifié par soriro (28 Jan 2018 - 23:47)