Modal ne s'ouvre pas sous chrome

12 août 2016, 23:57

Bonjour,
je rencontre un problème avec une fenêtre modal sous chrome.

Jappel la modal lorsque l'ont sélectionne une option de mon select, sous firefox et IE11 cela fonctionne sans problème.
Par contre sous chrome elle ne s'affiche pas...

Voici mon code :

<!DOCTYPE <!DOCTYPE html>
<html>
<head meta charset="UTF8" lang="fr">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <title>modal</title>
</head>
<body>
    <div class="container">
     
                         <select name="gestion" id="mode" class="postform form-control">
                          		   <option value="-1">Sélectionnez un mode</option>
                                   <option value="0" >Gérer la demande en interne</option>
                                   <option data-target="#Modal" data-toggle="modal" value="1">Demander  la prise en charge par </option>                      
                          </select>
  
<!-- Modale -->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" 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">Titre de la modale</h4>
            </div>
            <div class="modal-body">
                Corps de la modale
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary"><i class="icon icon-check icon-lg"></i> Valide</button>
                <button type="button" class="btn btn-inverse" data-dismiss="modal"><i class="icon icon-times icon-lg"></i> Fermer</button>
            </div>
        </div>
    </div>
</div>
</div>
 
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    </body>
    </html>

Voilas si vous avez des idées pour résoudre mon problème, je suis preneur.

Merci

13 août 2016, 00:51

Tu as regardé dans ta console JS ? Ctrl+Maj+i sous Chrome ou Firefox

13 août 2016, 10:10

j'ai regardé mais il à rien qui s'affiche dans la console.

13 août 2016, 11:51

Par contre je viens de voir que sous firefox à affichage la ligne la div de la modal se retrouve avec l’attribut :

style="display: block; padding-left: 17px;"

du coup elle devient :

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true" style="display: block; padding-left: 17px;">

Mais sous chrome rien ne change.

13 août 2016, 12:02

Tu ne peux pas afficher de cette façon une modale en la plaçant sur <option>, il faut que tu ajoutes un javascript :
http://stackoverflow.com/questions/2839 ... -in-select

Par ailleurs, tu as un souci de Doctype.

13 août 2016, 12:59

Tu ne peux pas afficher de cette façon une modale en la plaçant sur <option>, il faut que tu ajoutes un javascript :
http://stackoverflow.com/questions/2839 ... -in-select

Par ailleurs, tu as un souci de Doctype.

Je viens de faire des essais mais ça ne va pas. Sous firefox la modal ne s'ouvre plus et sous chrome elle à l'aire de s'ouvrir mais elle n'est pas visible...

voila mon code :

<!DOCTYPE html>
<html>
<head meta charset="UTF8" lang="fr">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <title>modal</title>
</head>
<body>
    <div class="container">
     
                         <select name="gestion" id="mode" class="postform form-control">
                          		   <option value="-1">Sélectionnez un mode</option>
                                   <option value="0" >Gérer la demande en interne</option>
                                   <option data-target="#Modal" data-toggle="modal" value="1">Demander  la prise en charge par </option>                      
                          </select>
  
<!-- Modale -->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" 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">Titre de la modale</h4>
            </div>
            <div class="modal-body">
                Corps de la modale
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary"><i class="icon icon-check icon-lg"></i> Valide</button>
                <button type="button" class="btn btn-inverse" data-dismiss="modal"><i class="icon icon-times icon-lg"></i> Fermer</button>
            </div>
        </div>
    </div>
</div>
</div>
 
    <script type="js/bootstrap.min.js"></script>
    <script>
		$(document).ready(function(){
			$('#Modal').hide();
			var selectvalue=$('select').val();
			$('select').click(function(){
			  if($('select').val() != selectvalue){
				$('#Modal').show();
			  }
			  else{
				$('#Modal').hide();
			  }
			})
		});	
	</script>
    </body>
    </html>

Merci pour votre aide.

13 août 2016, 13:12

Je viens de trouver avec du jquery.

Je me suis aidé de ce poste :

http://stackoverflow.com/questions/3275 ... ion-change

Merci pour votre aide

Modal ne s'ouvre pas sous chrome

Qui est en ligne