28112 sujets

CSS et mise en forme, CSS3

Bonjour

j'utilise le composant de fenetre modale de bootstrap :

https://getbootstrap.com/docs/4.0/components/modal/

J'ai sur ma page une image en fond :

body {background-image: url("/grafselements/perpignan.jpg");background-repeat:no-repeat center center fixed;-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }


et dans mon html :

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">    
		<!-- Modal content-->
		<div class="modal-content">
			<div class="modal-header" id="modal-header">				
				<h4 class="modal-title">Connexion</h4>
			</div>
			<div class="modal-body">
				<p>Entrez vos identifiants</p>
				<form>
					<div class="form-group">
						<label for="exampleInputEmail1">Identifiant</label>
						<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="ex : nico84">    
					</div>
					<div class="form-group">
						<label for="exampleInputPassword1">Mot de Passe</label>
						<input type="password" class="form-control" id="exampleInputPassword1" placeholder=".........">	
					</div>
					<div class="form-check">
						<small id="emailHelp" class="form-text text-muted"><a href="#">J'ai oublié mon Mot de passe</a></small>
						<input type="checkbox" class="form-check-input" id="exampleCheck1">
						<label class="form-check-label" for="exampleCheck1">Se souvenir de moi</label>
					</div>
						<button type="submit" class="btn btn-primary">Connexion</button>
				</form>				
			</div>			
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>      
    </div>
	</div>  


pour la modale et

<a href="#" data-toggle="modal" data-target="#myModal">Connexion</a>


pour l'ouvrir

Quand j'ouvre la modale l'arriere plan se desactive, la barre de defilement vertical disparait et l'image en background du body prend la place restante ce qui genere un mouvement ... disgracieux.....

Je cherche une solution a ce probleme, par avance merci
Modifié par Henneka (21 Sep 2018 - 23:32)