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