web-dev-qa-db-fra.com

Twitter bootstrap modal ne fonctionne pas

Je suis nouveau sur Twitter Bootstrap. Je travaille sur un panneau modal, mais celui-ci n'est pas affiché. Il s'estompe, mais le modal lui-même n'apparaît pas J'ai vérifié la console d'erreur, et il n'y a pas d'erreur.

Mon code est à l'intérieur du <head> tag; J'inclus les scripts comme:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $ruadmin ?>js/bootstrap.js"></script>
<script src="<?php echo $ruadmin ?>js/tablesorter/jquery.tablesorter.js"></script>
<script src="<?php echo $ruadmin ?>js/tablesorter/tables.js"></script>

Page modale:

<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Welcome</h3>
  </div>
  <div class="modal-body">
    <p> Hello </p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>
javascriptjquerytwitter-bootstrapmodal-dialog
29
baig

Vous devez utiliser le data-target tag.

Essayez de remplacer le href="#myModal" attribut avec data-target="#myModal". En plus, vous avez mis une classe hide, je suppose que ça ne devrait pas être là.

Regardez les exemples ici

31
André Junges

Change ça:

<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>

Pour ça:

<button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

remarque que changer a tag en button tag n’est pas la solution mais qu’il ajoute le data-target et data-toggle attribut qui fait le "travail")

S'il vous plaît regardez cet exemple:

<!DOCTYPE html >

<html>
<head>
    <title>Bootstrap Modal</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>    
    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</head>
<body>
    <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="purchaseLabel" 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" id="purchaseLabel">Purchase</h4>
                </div>
                <div class="modal-body">
                    sup?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Purchase</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
13
sabotero

J'ai eu le même problème, j'ai réalisé que j'incluais la bibliothèque JQUERY après BOOTSTRAP.

Vérifiez que dans votre page Web, vous ajoutez/liez d’abord le lien JQUERY, puis Bootstrap

4
s1gm9

Au cas où quelqu'un rencontrerait ce problème et que rien de ce qui précède ne fonctionnerait, la classe css n'apparaissait pas dans l'attribut class de mon modal.

J'ai eu la div de mon modal comme ça

<div class="modal" id="AdvanceSearchModal" tabindex="-1" role="dialog">

J'ai ajouté la classe de fondu

<div class="modal fade" id="AdvanceSearchModal" tabindex="-1" role="dialog">

et avec cela le modal s'ouvre à nouveau

2
FFHanzel