Ich bin neu bei Twitter Bootstrap. Ich arbeite an einem modalen Panel, aber es wird nicht angezeigt. Der Bildschirm wird ausgeblendet, aber das Modal selbst wird nicht angezeigt. Ich habe die Fehlerkonsole überprüft und es gibt keine Fehler.

Mein Code befindet sich im Tag <head>. Ich füge die Skripte hinzu wie:

<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>

Modale Seite:

<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>
30
baig 9 Dez. 2013 im 18:05

4 Antworten

Beste Antwort

Sie müssen das Tag data-target verwenden.

Versuchen Sie, das Attribut href="#myModal" durch data-target="#myModal" zu ersetzen. Außerdem hast du eine hide Klasse gesetzt, ich denke, sie sollte nicht da sein.

Schauen Sie sich die Beispiele hier an

32
Daniel Gray 22 Nov. 2016 im 16:54

Falls jemand auf dieses Problem stößt und keines der oben genannten Probleme funktioniert, hat die CSS-Klasse das Klassenattribut meines Modals nicht eingeblendet

Ich hatte das Div meines Modals so

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

Ich habe Fade-Klasse hinzugefügt

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

Und damit öffnet sich das modal wieder

2
FFHanzel 12 Aug. 2016 im 17:16

Ich hatte das gleiche Problem und stellte fest, dass ich die JQUERY-Bibliothek nach BOOTSTRAP einbinde.

Überprüfen Sie, ob Sie auf Ihrer Webseite zuerst JQUERY und dann Bootstrap hinzufügen / verknüpfen

5
s1gm9 6 Dez. 2015 im 21:26

Ändere das:

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

Dazu:

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

(Beachten Sie, dass das Ändern des Tags a in das Tag button nicht die Antwort ist, sondern das Attribut data-target und data-toggle hinzugefügt wird, das die "Arbeit" erledigt.)

Bitte schauen Sie sich dieses Beispiel an:

<!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>
14
sabotero 3 Dez. 2014 im 18:41