Wie füge ich ein Modal an eine Schaltfläche oder ein Bild an? Mein Code wird nicht richtig funktionieren ... Ich sehe die Schaltfläche, aber das Modal wird nicht geöffnet

Ich brauche Hilfe mit den Modalitäten, die ich am Ende meines Codes hinzugefügt habe. Nicht sicher, ob ich sie falsch angehängt habe, oder ob der Modalcode selbst falsch ist. Bitte helfen !!!Wie füge ich ein Modal an eine Schaltfläche oder ein Bild an? Mein Code wird nicht richtig funktionieren ... Ich sehe die Schaltfläche, aber das Modal wird nicht geöffnet

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    \t <head> 
 
\t \t  <meta charset="utf-8"> 
 
\t \t  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
\t \t  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t \t  <title>Jane Doette</title> 
 
\t \t  <script type="text/javascript" href="jquery-3.0.0.js"></script> 
 
\t \t  <script type="text/javascript" href="bootstrap.min.js"></script> 
 
\t \t  <link rel="stylesheet" type="text/css" href="bootstrap.css"> 
 
\t \t  <link rel="stylesheet" type="text/css" href="JaneDoette.css"> 
 
\t \t  <link href='https://fonts.googleapis.com/css?family=Lato:300' 
 
      rel='stylesheet' type='text/css'> 
 
\t  </head> 
 
\t  <body> 
 
\t \t  <div class="container"> 
 
\t \t \t  <div class="row"> 
 
\t \t \t \t  <div class="col-md-6"> 
 
\t \t \t \t \t  <img class="title-logo" 
 
    src="file:///Users/Diana/Documents/fvlogo.gif" class="img-responsive" 
 
    alt="responsive image"> 
 
\t \t \t \t  </div> 
 
\t \t \t \t  <div class="col-md-6 text-right text-uppercase"> 
 
\t \t \t \t \t  <h1 class="title-super text-thin">Jane Doette</h1> 
 
\t \t \t \t \t  <h3>Front-end Ninja</h3> 
 
\t \t \t \t  </div> 
 
\t \t  \t  </div> 
 
\t \t \t  <div class="row"> 
 
\t \t \t \t  <div class="col-md-12"> 
 
\t \t \t \t \t  <img 
 
    src="file:///Users/Diana/Documents/testhtml1140x350.jpg" class="img- 
 
    responsive" alt="responsive image"> 
 
\t \t \t \t  </div> 
 
\t \t \t  </div> 
 
\t \t \t  <div class="row"> 
 
\t \t \t \t  <div class="col-md-12"> 
 
\t \t \t \t \t  <h2 class="text-muted">Featured Work</h2> 
 
\t \t \t \t  </div> 
 
\t \t \t  </div> 
 
\t \t \t  <div class="row text-center"> 
 
\t \t \t \t  <div class="col-md-4"> 
 
\t \t \t \t \t  <img src="file:///Users/Diana/Documents/450x300Type.jpg" 
 
    class="img-responsive" alt="responsive image"> 
 
\t \t \t \t \t  <h3>Type</h3> 
 
\t \t \t \t \t  <p> 
 
\t \t \t \t \t \t  <button type="button" class="btn" data-toggle="modal" 
 
          data-target="#project1">Launch Demo Modal</button> 
 
\t \t \t \t \t  </p> 
 
\t \t \t \t  </div> 
 
\t \t \t \t  <div class="col-md-4"> 
 
\t \t \t \t \t  <img 
 
         src="file:///Users/Diana/Documents/450x300wallpaper.jpg" 
 
         class="img-responsive" class="img-responsive" 
 
         alt="responsive image"> 
 
\t \t \t \t \t  <h3>Wallpaper</h3> 
 
\t \t \t \t \t  <p> 
 
\t \t \t \t \t \t  <button type="button" class="btn" data-toggle="modal" 
 
       data-target="#project1">Launch Demo Modal</button> 
 
\t \t \t \t \t  </p> 
 
\t \t \t \t  </div> 
 
\t \t \t \t  <div class="col-md-4"> 
 
\t \t \t \t \t  <img src="file:///Users/Diana/Documents/450x300print.jpg" 
 
         class="img-responsive" class="img-responsive" 
 
         alt="responsive image"> 
 
\t \t \t \t \t  <h3>Print</h3> 
 
\t \t \t \t \t  <p> 
 
\t \t \t \t \t \t  <a href="http://github.com">Link to project</a> 
 
\t \t \t \t \t  </p> 
 
\t \t \t \t  </div> 
 
\t \t \t  </div> 
 
\t \t  </div> 
 

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

 
\t \t <!-- Modal1 --> 
 
    \t <div class="modal fade" id="project1" tabindex="-1" role="dialog" aria- 
 
     labelledby="myModalLabel" aria-hidden="true"> 
 
     \t <div class="modal-dialog"> 
 
      \t <div class="modal-content"> 
 
       \t <div class="modal-header"> 
 
       \t \t <button type="button" class="close" data-dismiss="modal"> 
 
         <span aria-hidden="true"></span><span class="sr- 
 
         only">Close</span></button> 
 
        \t <h4 class="modal-title" id="myModalLabel">Type</h4> 
 
       \t \t </div> 
 
       \t <div class="modal-body"> 
 
        \t <img src="file:///Users/Diana/Documents/450x300Type.jpg" 
 
         class="img-responsive" alt="responsive image"> 
 
        \t <p> This was my first project in this class. I learned a 
 
         lot about HTML and CSS. The portfolio page looks nice, 
 
         but there really isn't that much info about your 
 
         projects. but putting a lot of text under the image 
 
         wouldn't look nice. So adding a modal would be the best 
 
         way to do this. </p> 
 
       \t </div> 
 
       \t <div class="modal-footer"> 
 
        \t <button type="button" class="btn btn-default" data- 
 
         dismiss="modal">Close</button> 
 
        \t <button type="button" class="btn btn-primary">Save Changes 
 
         </button> 
 
       \t </div> 
 
      \t </div> 
 
     \t </div> 
 
    \t </div> 
 

 
    \t <!--Modal2--> 
 
    \t <div class="modal fade" id="project1" tabindex="-1" role="dialog" aria- 
 
     labelledby="myModalLabel" aria-hidden="true"> 
 
     \t <div class="modal-dialog"> 
 
      \t <div class="modal-content"> 
 
       \t <div class="modal-header"> 
 
       \t \t <button type="button" class="close" data-dismiss="modal"> 
 
         <span aria-hidden="true"></span><span class="sr- 
 
         only">Close</span></button> 
 
        \t <h4 class="modal-title" id="myModalLabel">Type</h4> 
 
       \t \t </div> 
 
       \t <div class="modal-body"> 
 
        \t <img 
 
         src="file:///Users/Diana/Documents/450x300Wallpaper.jpg" 
 
         class="img-responsive" alt="responsive image"> 
 
        \t <p> This was my first project in this class. I learned a 
 
         lot about HTML and CSS. The portfolio page looks nice, 
 
         but there really isn't that much info about your 
 
         projects. but putting a lot of text under the image 
 
         wouldn't look nice. So adding a modal would be the best 
 
         way to do this. </p> 
 
       \t </div> 
 
       \t <div class="modal-footer"> 
 
        \t <button type="button" class="btn btn-default" data- 
 
         dismiss="modal">Close</button> 
 
        \t <button type="button" class="btn btn-primary">Save Changes 
 
         </button> 
 
       \t </div> 
 
      \t </div> 
 
     \t </div> 
 
    \t </div> 
 

 
    \t <!--Modal3--> 
 
    \t <div class="modal fade" id="project1" tabindex="-1" role="dialog" aria- 
 
     labelledby="myModalLabel" aria-hidden="true"> 
 
     \t <div class="modal-dialog"> 
 
      \t <div class="modal-content"> 
 
       \t <div class="modal-header"> 
 
       \t \t <button type="button" class="close" data-dismiss="modal"> 
 
         <span aria-hidden="true"></span><span class="sr- 
 
         only">Close</span></button> 
 
        \t <h4 class="modal-title" id="myModalLabel">Type</h4> 
 
       \t \t </div> 
 
       \t <div class="modal-body"> 
 
        \t <img src="file:///Users/Diana/Documents/450x300Print.jpg" 
 
         class="img-responsive" alt="responsive image"> 
 
        \t <p> This was my first project in this class. I learned a 
 
         lot about HTML and CSS. The portfolio page looks nice, 
 
         but there really isn't that much info about your 
 
         projects. but putting a lot of text under the image 
 
         wouldn't look nice. So adding a modal would be the best 
 
         way to do this. </p> 
 
       \t </div> 
 
       \t <div class="modal-footer"> 
 
        \t <button type="button" class="btn btn-default" data- 
 
         dismiss="modal">Close</button> 
 
        \t <button type="button" class="btn btn-primary">Save Changes 
 
         </button> 
 
       \t </div> 
 
      \t </div> 
 
     \t </div> 
 
    \t </div> 
 
\t </body> 
 
</html>

ich eine Taste oder ein Bild müssen die modal angebracht zu werden, habe ich mit beiden versucht, und keiner scheint zu funktionieren.

Quelle

2016-06-27 DianaBG

Welche Bibliotheken versuchen Sie zu verwenden? Ist das jQuery, Bootstrap, ..? Weitere Details wären nützlich. –

Zunächst sollten Sie jedem Modal eine eigene ID zuweisen.

Ich gehe davon aus hier, haben Sie bootstrap.min.css, jquery.min.js und bootstrap.min.js hinzugefügt

Ihre HTML so sein sollte,

<div class="container"> 
    <h2>Modal Example</h2> 

    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 

     <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div>

check this fiddle here

Quelle

2016-06-27 04:10:36

Es ist ziemlich schwer zu verstehen, was Sie meinen, indem ich einen Button an ein Modal anschließe, da ich die Modale in JSFiddle öffnen konnte, allerdings sehe ich ein paar Fehler in Ihrem Markup, die Ihnen helfen könnten:

Es sieht so aus, als ob Sie drei separate Modale auf der Seite haben möchten. Jedes dieser Modale hat jedoch das gleiche id Attribut (sie sind alle project1). Die IDs müssen eindeutig sein.
Sobald alle id Attribute eindeutig sind, ändern Sie das data-target Attribut auf den Schaltflächenelementen zu den entsprechenden Modalen id.
Nicht sicher, ob Sie vergessen haben, die ganze Sache zu kopieren, aber Ihre doctype Erklärung ist unvollständig.

Here's a fixed version

Quelle

2016-06-27 04:12:08 scottgearyau

Wie füge ich ein Modal an eine Schaltfläche oder ein Bild an? Mein Code wird nicht richtig funktionieren ... Ich sehe die Schaltfläche, aber das Modal wird nicht geöffnet

Antwort

Verwandte Themen