So fügen Sie einem Modal Navigationsschaltflächen (vorherige und nächste) hinzu

Ich habe eine Bildminiatur erstellt und diese Miniatur mit dem folgenden Code verknüpft.So fügen Sie einem Modal Navigationsschaltflächen (vorherige und nächste) hinzu

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t \t <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
 
\t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
\t \t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel='stylesheet' type='text/css' /> 
 
\t \t 
 
</head> 
 
<body> 
 

 
\t \t <!--thumbnail section--> 
 
\t \t <section class="container"> 
 
\t \t \t <div class="row add-bottom text-center"> 
 
\t \t \t \t <a href="#migrant" class="thumbnail" data-toggle="modal"> 
 
\t \t \t \t \t <img src=".." alt="Project Image" class="img-responsive center-block"> 
 
\t \t \t \t </a> 
 
\t \t \t \t <br /> 
 
\t \t \t \t <br /> 
 
\t \t \t \t <a href="#water" class="thumbnail" data-toggle="modal"> 
 
\t \t \t \t \t <img src=".." alt="Project Image1" class="img-responsive center-block"> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t </section> 
 
\t \t 
 
\t \t <!--Modal Content--> 
 
\t \t <div class="modal fade" id="migrant" role="dialog"> 
 
\t \t \t <div class="modal-dialog"> 
 
\t \t \t \t 
 
\t \t \t \t <div class="modal-content"> 
 
\t \t \t \t \t <div class="modal-header"> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t <h3>Migrants</h3> 
 
\t \t \t \t \t \t <button type="button" class="close" data-dismiss="modal">x</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="modal-body"> 
 
\t \t \t \t \t \t <div class="modal-footer txt_center"> 
 
\t \t \t \t \t \t \t <p> 
 
\t \t \t \t \t \t \t \t <img src=".." alt="migrant01" class="pull-right">The Grapes of Wrath is an Amer list novel written by John Steinbeck and published in 1939. The book won the National Book Award and Pulitzer Prize for fiction, and it was cited prominently when Steinbeck was awarded the Nobel Prize in 1962 
 
\t \t \t \t \t \t \t </p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="modal-footer"> 
 
\t \t \t \t \t \t <button class="btn" data-dismiss="modal">Close</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="modal fade" id="water" role="dialog"> 
 
\t \t \t <div class="modal-dialog"> 
 
\t \t \t \t 
 
\t \t \t \t <div class="modal-content"> 
 
\t \t \t \t \t <div class="modal-header"> 
 
\t \t \t \t \t \t <h3>Water</h3> 
 
\t \t \t \t \t \t <button type="button" class="close" data-dismiss="modal">x</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="modal-body"> 
 
\t \t \t \t \t \t <div class="modal-footer txt_center"> 
 
\t \t \t \t \t \t \t <p> 
 
\t \t \t \t \t \t \t \t <img src=".." alt="water01" class="pull-right">The Orchidaceae are a diverse and widespread family of flowering plants, with blooms that are often colourful and often fragrant, commonly known as the orchid family. Along with the Asteraceae, they are one of the two largest families of flowering 
 
\t \t \t \t \t \t \t \t plants. The Orchidaceae have about 27,800 currently accepted species, distributed in about 880 genera 
 
\t \t \t \t \t \t \t </p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="modal-footer"> 
 
\t \t \t \t \t \t <button class="btn" data-dismiss="modal">Close</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
</body> 
 
</html>

Jetzt möchte ich Navigationstasten (vorherige und nächste) mit dem modalen Fenster hinzuzufügen, die zusammen mit einem Absatz das Bild angezeigt, der das Bild beschreibt. Sobald das modale Fenster angezeigt wird, muss ich das Fenster nicht schließen und immer wieder zum Miniaturbild zurückkehren. Einmal wird das modale Fenster durch Hinzufügen der Navigationsschaltfläche angezeigt, die ich für das gewünschte Bild mit seiner Beschreibung aufrufen möchte. Wie könnte ich vielleicht dafür gehen?

Quelle

2016-05-09 d.d.

Ich bin mir nicht sicher, wie bequem Sie mit jQuery sind, aber Sie können dies mit ein wenig Javascript/jQuery erreichen. Der beste Weg wäre, mit Ihren Bildern und Texten in einer Art von Datenobjekt zu beginnen. Hier ist ein Plunker-Link mit einem Beispiel basierend auf Ihrem ursprünglichen Code.

https://plnkr.co/edit/Fq9pFzrgE9VOOLmljlXw?p=preview

Darin habe ich einen Datensatz erstellt eine grundlegende Reihe von Javascript-Objekte verwenden.

var data = [ 
    { src: "https://placehold.it/150x150?text=Image1", title: "Image 1", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a est mauris. Sed non sollicitudin lacus. Sed maximus facilisis purus, et blandit lectus vehicula in." }, 
    { src: "https://placehold.it/150x150?text=Image2", title: "Image 2", description: "Aenean accumsan metus ipsum, id vehicula felis semper sed. Sed hendrerit pulvinar porttitor. Etiam id tortor leo. Integer ex dui, vulputate vel iaculis sit amet, laoreet eu sem." }, 
    { src: "https://placehold.it/150x150?text=Image3", title: "Image 3", description: "Vivamus luctus est at sapien sollicitudin, nec mattis arcu condimentum. Vivamus sed varius diam. Nulla varius, tortor vel tempus feugiat, libero felis pellentesque mi, sit amet sagittis lacus massa et erat. " }, 
    { src: "https://placehold.it/150x150?text=Image4", title: "Image 4", description: "Vestibulum eu ex ac nunc pretium hendrerit vel in quam. Morbi imperdiet imperdiet pharetra." } 
    ];

Dann habe ich ein paar einfache Funktionen, um die modale Navigation zu verwalten, einschließlich einer Überprüfung, ob die nav Links deaktiviert werden soll. Ich benutze auch den Javascript-Trigger, um das Modal zu öffnen, so dass Sie das entsprechende Element beim Klicken laden können.

Um die Daten zu laden, habe ich den Dataset durchgeschleift und den HTML-Code für die Thumbnails angehängt. Das ist ein bisschen komplexer, aber immer noch nicht schrecklich.

$(document).ready(function() { 
    var $thumbs = $(".thumbnails"); 

    // dynamically add thumbnails to page 
    for (var i = 0; i < data.length; i++) { 
    $thumbs.append('<a href="#" onclick="openModal(' + i + ')" class="thumbnail" data-toggle="modal" alt="' + data[i].title + '"><img src="' + data[i].src + '" class="img-responsive center-block" /></a>'); 
    } 
});

Damit können Sie Ihre HTML auf nur einen modalen Dialog reduzieren. Ich habe auch die Nav-Links innerhalb des Körpers eingefügt, anstatt Schaltflächen in der Fußzeile zu verwenden.

<body> 
    <!--thumbnail section--> 
    <section class="container"> 
    <div class="row add-bottom text-center thumbnails"> 
    </div> 
    </section> 
    <!--Modal Content--> 
    <div id="modal" class="modal fade" tabindex="-1" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 id="modalTitle" class="modal-title"></h4> 
     </div> 
     <div class="modal-body"> 
      <div class="row"> 
      <div class="col-xs-1"> 
       <a id="navPrev" href="#" onclick="prevImg()"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a> 
      </div> 
      <div class="col-xs-10"> 
       <img id="modalImg" src="" alt="" class="pull-right" /> 
       <span id="modalText"></span> 
      </div> 
      <div class="col-xs-1"> 
       <a id="navNext" href="#" onclick="nextImg()"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a> 
      </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</body>

Schließlich, hier sind ein paar einfache Stile, um die Nav-Links zu formatieren.

#navPrev, #navNext { 
    color: #333; 
    font-size: 2em; 
} 

#navPrev:hover, #navNext:hover { 
    color: red; 
} 

#navPrev[disabled], #navNext[disabled] { 
    color: #cdcdcd; 
    cursor: default; 
}

Hoffe, dass hilft!

Quelle

2016-05-09 16:51:30 WonderGrub

ich den obigen Code versucht, aber ich bekomme ein unerwünschtes Ergebnis (mehrere Miniaturansichten und Modale werden zur gleichen Zeit angezeigt), was nicht dasselbe ist wie das Ergebnis in Plunker.Mehr darüber in Plunker habe ich auch für die angegebene thumbnail gesehen Das entsprechende Modal wird nicht angezeigt, stattdessen wird standardmäßig das 1. Modal angezeigt. Ich möchte auch die vorherige/nächste Schaltfläche weglassen, wenn sie das erste/letzte Modal erreicht.Anstatt Schaltflächen in der Modal-Fußzeile zu verwenden, wie Navigationspfeile in dem Modal-Körper verwenden, der wiederum zu vorherigen/nächsten modalen umleiten wird? –

Ich habe die Antwort aktualisiert, um die anderen Funktionen hinzuzufügen und das Problem zu beheben, bei dem immer das erste Element beim Klicken angezeigt wurde. Wenn Sie den Code unverändert verwenden, funktioniert es. Ich würde definitiv empfehlen, dass Sie nach einigen Kursen online suchen, um Ihnen zu helfen, jQuery und Bootstrap ein wenig besser zu verstehen. – WonderGrub

Sie können die Javascript-Modal-API verwenden, um das aktuelle Modal zu verbergen und den gewünschten Watwever anzuzeigen.

Zum Beispiel habe ich eine Funktion, um die Tasten der Modalverben zugeordnet, es zu tun:

<body> 

    <!--thumbnail section--> 
    <section class="container"> 
    <div class="row add-bottom text-center"> 
     <a href="#migrant" class="thumbnail" data-toggle="modal"> 
     <img src=".." alt="Project Image" class="img-responsive center-block"> 
     </a> 
     <br /> 
     <br /> 
     <a href="#water" class="thumbnail" data-toggle="modal"> 
     <img src=".." alt="Project Image1" class="img-responsive center-block"> 
     </a> 
    </div> 
    </section> 

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

     <div class="modal-content"> 
     <div class="modal-header"> 

      <h3>Migrants</h3> 
      <button type="button" class="close" data-dismiss="modal">x</button> 
     </div> 
     <div class="modal-body"> 
      <div class="modal-footer txt_center"> 
      <p> 
       <img src=".." alt="migrant01" class="pull-right">The Grapes of Wrath is an Amer list novel written by John Steinbeck and published in 1939. The book won the National Book Award and Pulitzer Prize for fiction, and it was cited prominently 
       when Steinbeck was awarded the Nobel Prize in 1962 
      </p> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-primary" onclick="showModal('water')">Next</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

    <div class="modal fade" id="water" role="dialog"> 
    <div class="modal-dialog"> 

     <div class="modal-content"> 
     <div class="modal-header"> 
      <h3>Water</h3> 
      <button type="button" class="close" data-dismiss="modal">x</button> 
     </div> 
     <div class="modal-body"> 
      <div class="modal-footer txt_center"> 
      <p> 
       <img src=".." alt="water01" class="pull-right">The Orchidaceae are a diverse and widespread family of flowering plants, with blooms that are often colourful and often fragrant, commonly known as the orchid family. Along with the Asteraceae, 
       they are one of the two largest families of flowering plants. The Orchidaceae have about 27,800 currently accepted species, distributed in about 880 genera 
      </p> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-primary" onclick="showModal('migrant')">Previous</button> 

      </div> 
     </div> 
     </div> 
    </div> 
    </div> 


    <script> 
    function showModal(id) { 
     $(".modal").modal('hide'); 
     $("#" + id).modal(); 
    } 

    </script> 
</body>

https://jsfiddle.net/vegdyf48/

der JavaScript-API: https://getbootstrap.com/javascript/#via-javascript

Quelle

2016-05-09 17:22:05 JSierra

Wie das gleiche für mehrere keine Thumbnails zu implementieren? –

Verwenden Sie die Beispielfunktion "showModal" als Rückruf in "onclick" -Ereignis auf den Schaltflächen und übergeben Sie die ID der Miniatur, die Sie anzeigen möchten. – JSierra

Auf diese Weise wird der Code sehr lang und für mehrere Thumbnails wird es schwierig zu implementieren sein. Also, ich möchte die Thumbnails in ein Array legen. Wie würde ich das umsetzen? –

So fügen Sie einem Modal Navigationsschaltflächen (vorherige und nächste) hinzu

Antwort

Verwandte Themen