Sujet Précédent Sujet Suivant

Problème avec modal en bootstrap

Fermé
linaa123 Messages postés 10 Date d'inscription dimanche 6 avril 2014 Statut Membre Dernière intervention 21 juillet 2014 - Modifié par pijaku le 24/07/2014 à 11:30
Anis SERRAFI Messages postés 1 Date d'inscription lundi 16 septembre 2013 Statut Membre Dernière intervention 24 juillet 2014 - 24 juil. 2014 à 00:24
j'ai un problème ce model ne fonctionne pas :/ je sais pas ou le problème aidez moi svp 


<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>



<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
modal
</button>

<!-- 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">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>




<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>
</html>
A voir également:

1 réponse

Réponse 1 / 1
Anis SERRAFI Messages postés 1 Date d'inscription lundi 16 septembre 2013 Statut Membre Dernière intervention 24 juillet 2014 1
Modifié par pijaku le 24/07/2014 à 11:32
Bonsoir Linaa je me présente c'est Anis SERRAFI, je suis Ingenieur développeur informatique spécialiste php et je vais résoudre tous tes soucis avec php et bootstrap mets toi à l'aise je suis aussi marocain...

Premièrement vas sur le site de Bootstrap
https://getbootstrap.com/

clique sur download bootstrap
"Tu vas télécharger un fichier zippé"

"Tu extrais le fichier tu aura un fichier css un fichier js et un fichier fonts"

"Tu vas mettre c'est trois fichiers dans un répertoire que tu vas nommer 'Projet'"

Deuxiemement
Dans le fichier projet tu crée un fichier index.php ou tu inclus ce code
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' 
<!DOCTYPE html>
<html>
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <script src="js/jquery.js"></script>
       <script src="js/bootstrap.min.js"></script>
       <script src="js/holder.js"></script>
       <script src="js/button.js"></script>
       <link href="css/bootstrap.css" rel="stylesheet">
       <link href="css/bootstrap-theme.min.css" rel="stylesheet">
       <link href="css/theme.css" rel="stylesheet">
       <link href="css/signin.css" rel="stylesheet">
    </head>

<body>

<a onclick="$('#myModal1').modal('show');">

<button type="button" class="btn btn-success btn-lg">Lancer le popup modal de Bootstrap</button>

</a>
 



<!-- Modal1 -->
<div class="modal fade"  id="myModal1" 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">×</button>
        <h4 class="modal-title">
         
         <span style="color: #658716; font-weight: bold;">Social</span>          </h4>
            
      </div>
      
      <div class="modal-body">
           <div style="text-align: justify;">
        <span style="font-weight: normal ; font-size: 12px ; font-family: Arial, Helvetica, sans-serif ; color: #000000; ">
         Pour éluder les difficultés et empêcher qu'elles ne s'éternisent, nous avons pensé que notre association devrait travailler et accompagner les populations défavorisées, notamment  les jeunes à sortir de leurs difficultés de tous les jours et favoriser des mécanismes au sein de leur quotidien afin de permettre une amélioration dans leur vie.
        </span>
            </div> 

      </div>
      
      <div class="modal-footer">
        
        <div style="margin-left: 400px;">
        <a onclick="$('#myModal1').modal('hide');">
        <button type="button" class="btn btn-success btn-lg">Continuer</button>
        </a>
        </div>
        
      </div>
      
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->        

</body>
</html>


'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
Voici Linaa mon adresse facebook ajoute moi les développeur doivent etre soudé entre eux si t'as besoin de quelque chose d'autre n'hésite pas je suis ton frère et je te respecte on est du maroc du meme pays t'inquiete je suis la pour toi tout ce que tu veux ajoute moi voici mon compte facebook
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
Adresse supprimée par la modération
1

Discussions similaires

À quoi sert le port common interface 5v only Samsung ?
zharg -
Reguletout -

29 réponses
Disque dur qui ne boot pas: no boot disk has been detected...
Utilisateur anonyme -
Utilisateur anonyme -

9 réponses