Bonsoir,
Je souhaite mettre un place une fenêtre modal sur mon site web avec bootstrap.
Il m'est arrivé de les réaliser plusieurs fois avec succès mais la j'ai beau la reconstruite et la tester à différent endroit du site j'ai toujours le même problème qui est le suivant et pas très esthétique :
Le fenêtre s'affiche bien mais je souhaiterai que comme dans toutes les démos, ce qu'il y a autour de la fenêtre modal soit ossombri
or la le tour est complètement noir !
Savez vous d'où peut venir ce petit problème ?
Cordialement,
Tigeek
9 réponses
Remets le fade in opacity a 1. il est utilisé au lancement du modal quand la div qui a le background noir apparait ;)
Je te conseille de lire un tuto sur l'héritage css : tuto
Salut !
Tu peux nous mettre le code ta modal stp ?
Est ce que tu as bien suivi l'example sur le site de Bootstrap : ici ?
Bonjour Tigeek,
As tu par hasard changer le CSS de la modale ?
Ou regarde si dans ton propre css tu n'a pas un élément avec la même classe
Bonjour,
Merci pour vos réponses.
http://tigeek.alwaysdata.net/test.php
Voici le lien d'une page sur laquelle j'ai mis une fenêtre modal pour que vous voyez précisément le problème.
Oui j'ai effectivement suivi l'exemple du site Boostrap mais même avec une modal toute simple j'ai le même problème.
Voici le code de la fenêtre modal :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Tanguy OGER</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap -->
<!--<link rel="stylesheet" type="text/css" href="http://bootswatch.com/cerulean/bootstrap.css" />-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/monBootstrap.css"/>
<!--<script type="text/javascript" src="js/jquery.min.js"></script>-->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!--<script type="text/javascript" src="js/scripts.js"></script>-->
</head>
<body>
<!-- Variable appelée dans le menu -->
<?php $nav_en_cours = 'test'; ?>
<!-- Menu -->
<?php include 'include/menu.php';?>
<div class="container">
<div class="row">
<div class="span12">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" method="post" action="include/traitement_connexion.php">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">CONNEXIONN</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="Login" class="col-lg-5 control-label">Login</label>
<div class="col-lg-3">
<input type="text" name="login" class="form-control" id="Login" placeholder="Login">
</div>
</div>
<div class="form-group">
<label for="Password1" class="col-lg-5 control-label">Password</label>
<div class="col-lg-3">
<input type="password" name="pwd" class="form-control" id="Password1" placeholder="Password">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" style="margin-right: 20px">Connexion</button>
<button type="reset" class="btn btn-default">Annuler</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>Puis le fichier css que j'appel pour modifier les choses que je souhaite :
body{
padding-top:60px;
background-color:#e7e7e7;
}
/*------ MENU ------*/
.navbar-default{
background-color: #C9C9C9;
}
/*Brand*/
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #FC022A;
background-color: transparent;
}
/*Liens menu*/
.navbar-default .navbar-nav > li > a{
font-family: 'palatino linotype', palatino, serif;
font-size: 15px;
font-weight: bold;
font-style: italic;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #FD0808;
background-color: transparent;
}
textarea{
height: 150px;
width: 500px;
}
#nav-gauche{
padding-top:60px;
}
hr{
color: #FF8814;
background-color: #0088cc;
height: 2px;
border: 0;
}
.nav-list > li > a:active {
outline: 0;
background-color: #0088cc;
color: white;
}
.bs-docs-sidenav{
width:258px;
background-color:white;
}
.bs-docs-sidenav > li > a {
display: block;
width: 190px 9;
margin: 0 0 -1px;
padding: 8px 14px;
border: 1px solid #e5e5e5;
}
/*Switch ON OFF*/
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
width: 200%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #EEEEEE; color: #07BA07;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #FF0303;
text-align: right;
}
.onoffswitch-switch {
width: 18px; margin: 6px;
background: #FFFFFF;
border: 2px solid #999999; border-radius: 20px;
position: absolute; top: 0; bottom: 0; right: 56px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}Je précise que dans ce fichier css rien est en rapport avec la fenêtre modal :)
Voila les informations complémentaires que je peux vous donner.
Merci
j'ai essayé de modifier modal-backdrop.in mais cela n'a rien changer après un peut de recherche j'ai modifier seulement
.fade.in {
opacity: 0.5;
}
Il y a donc bien l'effet dombre mais aussi si la fenêtre modal comme vous pouvez le constater : http://tigeek.alwaysdata.net/test.php
Je dois modifier encore quelques choses dans le css mais je ne vois pas trop quoi
j'ai essayé rien à changé, en inspectant avec l'outil de développement google chrome je vois que .modal-backdrop.in n'ai pas utilisé.