Modal wird überhaupt nicht geladen

Also versuche ich ein Modal zu öffnen, wenn ich ein Wort in der Fußzeile anklicke, aber absolut nichts passiert. Hier ist der modale Code:Modal wird überhaupt nicht geladen

<div class="col-lg-5 footerLeft"><a href="#aboutit" data-toggle="modal" data-target="#aboutit">about</a></div> 
<div class="modal fade" id="aboutit"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h3>Caesar's Cipher</h3> 
      </div> 
      <div class="modal-body"> 
       <p>Explanation.</p> 
      </div> 
      <div class="modal-footer"> 
       <a href="#" class="btn" data-dismiss="modal">Learn More</a> 
       <a href="#" class="btn btn-primary">Close</a> 
      </div> 
      </div> 
     </div> 
    </div> 
</div>

Ich möchte das Modal öffnen, wenn Sie auf das Wort "etwa" auf der linken unteren Ecke klicken. Here is der Codepen der ganzen Sache.

Vielen Dank an alle :)

EDIT. Hier ist der Kopfteil:

<head> 
    <meta charset=utf-8/> 

    <!-- bootstrap files --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
    <link rel="stylesheet" type="text/css" href="cipher.css"> 


    <title>CIPHER</title> 
</head>

EDIT 2: jsfiddle Link: https://jsfiddle.net/fxrLymrq/

Quelle

2016-07-09 l-emi

haben Sie auf die Seite bootstrap model js file geladen? –

es funktioniert perfekt, [Demo] (https://jsfiddle.net/3d1sunbt/) wahrscheinlich haben Sie eine js oder CSS-Datei verpasst. – Pedram

Seltsam, ich kann nicht herausfinden, was. Danke für die Geige, zumindest weiß ich, dass ich etwas richtig finde –

Sie sollten diese js Dateien in Ihrem Header laden auch:

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

dies sollte Ihre modal Code ausführen.

Ich reparierte Ihr fiddle Sie haben die Skriptdateien der bootsrap.js hinzufügen und Sie können auch dieses Codes loszuwerden:

$('#aboutit').ready(function() { 
    $('#aboutit').modal('show'); 
});

Quelle

2016-07-09 09:46:50

Noch funktioniert nicht:/ –

@ l-emi können Sie eine Geige mit Ihrem gesamten Code hochladen, der sich auf Ihr Problem bezieht? Es wird einfacher sein, dir zu helfen. –

Sicher, gib mir eine Sekunde –

ARBEITS CODE

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

</head> 

<body> 
<div class="col-lg-5 footerLeft"><a href="#aboutit" data-toggle="modal" data-target="#aboutit">about</a></div> 
<div class="modal fade" id="aboutit"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h3>Caesar's Cipher</h3> 
      </div> 
      <div class="modal-body"> 
       <p>Explanation.</p> 
      </div> 
      <div class="modal-footer"> 
       <a href="#" class="btn" >Learn More</a> 
       <a href="#" class="btn btn-primary" data-dismiss="modal">Close</a> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

Andere ändern : data-follow = "modal" angewendet, um die Schaltfläche zu schließen

Quelle

2016-07-09 10:08:54 Pranjal

Hey, es funktioniert! Danke :) Das einzige Problem ist, dass es mein Styling und Layout kaputt gemacht:/ –

Ich fand heraus, dass, wenn ich meine CSS-Blatt aus dem HTML entfernen das Modal funktioniert, aber es sieht durcheinander (offensichtlich, wenn es kein Styling). Wenn ich es jedoch wieder hinzufüge, funktioniert das Modal nicht. Warum könnte das sein? –

Können Sie Ihren CSS-Code hochladen? – Pranjal

Modal wird überhaupt nicht geladen

Antwort

Verwandte Themen