[Bootstrap] Modal sous Firefox

**MrSaooty** · 07/03/2014, 23h41

Bonjour, comme dit dans le titre je rencontre un probleme avec les modals de bootstrap sous Firefox, et uniquement sous Firefox.

Screen du haut de la page sous Google Chrome
Nom : kx1WNLF.png
Affichages : 252
Taille : 15,4 Ko

Nom : kx1WNLF.png
Affichages : 252
Taille : 15,4 Ko

Et screen sous FireFox
Nom : M8VTKvm.png
Affichages : 261
Taille : 52,1 Ko

Donc voilà, le code du modal apparait alors qu'il ne devrait pas apparaitre, j'ai tout essayé je ne trouve pas de solution

**rodolphebrd** · 08/03/2014, 08h20

Bonjour,

La solution pourrait être de poster votre code...

**MrSaooty** · 08/03/2014, 10h36

En effet avec le code ça sera mieux alors le voici.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="fr">
  <head>
	<title>Easy Ranked</title>
 
	<!-- Meta Tags-->
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="MrSaooty">
	<!-- End Meta Tags-->
 
    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
 
  <!-- Styesheets-->
	<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" media="screen" href="css/form.css"/>
	<link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>
	<link rel="stylesheet" type="text/css" media="screen" href="css/flexslider.css"/>
	<link rel="stylesheet" type="text/css" media="screen" href="css/fancybox.css"/>
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
	<!-- End Stylesheets-->
 
	<!-- Google Font-->
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,800,700,300" />
	<!-- End Google Font-->
 
  </head>
 
  <body>
 
  <?php include 'inc/modal.php'; ?>
 
	<!-- Header -->
	<header class="header">	
		<div class="wrapper">
 
			<div class="row-fluid">
				<!-- Logo -->
				<div class="logo">
					<h1><a href="accueil">Easy Ranked</a></h1> 
				</div>
				<!-- End Logo -->
 
				<!-- Navigation -->
				<div class="navbar">
					<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</a>
 
					<nav class="nav-collapse">
						<ul class="nav pull-right">
							<li class="active"><a href="accueil">Accueil</a></li>
							<?php if(isset($_SESSION['id'])){ echo '<li><a href="actions/logout">Déconnexion</a></li>'; } else { echo '<li><a href="#login" data-toggle="modal">Connexion</a></li>'; } ?>
							<li><a href="about">À propos</a></li>
							<li><a href="contact">Contact</a></li>
						</ul>
					</nav>
				</div>
				<!-- End Navigation -->
 
			</div>
 
		</div>
	</header>
	<!-- End Header -->

Le modal.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!-- Login -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title">Connexion à votre compte<h4>
			</div>
			<div class="modal-body">
				<form action="actions/login" method="post">
					<div class="control-group">
						<label class="control-label" for="username">Nom d'utilisteur</label>
						<div class="controls">
						<input type="text" id="username" name="username" placeholder="" class="input-xlarge" required="">
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="password">Mot de passe</label>
					<div class="controls">
						<input type="password" id="password" name="password" placeholder="" class="input-xlarge" required="">
					</div>
				</div>
				<div class="checkbox">
					<label>
					<input type="checkbox" name="remember">Rester connect&eacute;
					</label>
				</div>
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-primary btn-block"><i class="fa fa-spinner fa-spin"></i> Connexion</button>
				</form>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

**rodolphebrd** · 08/03/2014, 14h13

Et il manque le code CSS.

[Bootstrap] Modal sous Firefox

HTML

Vue hybride

Discussions similaires

Partager

Partager