堆棧內存溢出
  簡體   English   中英

如何向模態添加導航按鈕（上一個和下一個）

[英]How to add navigation buttons(previous and next) to a modal

 原文  2016-05-09 15:55:56  2   2    javascript/ jquery/ html/ css/ twitter-bootstrap

問題描述

我已經使用以下代碼創建了圖像縮略圖並鏈接了該縮略圖。 

 <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel='stylesheet' type='text/css' /> </head> <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"> <button class="btn" data-dismiss="modal">Close</button> </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"> <button class="btn" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body> </html>

現在我想在模態窗口中添加導航按鈕（上一個和下一個），該窗口將顯示圖像以及描述圖像的段落。 因此，一旦顯示模態窗口，我就不必關閉窗口並一遍又一遍地回到縮略圖圖像。 一次，通過添加我想要去的所需圖像及其描述的導航按鈕來顯示模態窗口。 我怎么可能這樣做？

2 個解決方案

解決方案1
 3  2016-05-09 17:22:05

您可以使用javascript模態API隱藏當前模態並顯示您想要的觀察者。

例如，我將一個函數關聯到模態的按鈕來執行它： 

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

javascript API： https ： //getbootstrap.com/javascript/#via-javascript

解決方案2
 1  2016-05-09 16:51:30

我不確定你對jQuery有多放心，但是你可以通過一些Javascript / jQuery實現這一點。 最好的方法是從某些類型的數據對象中的圖像和文本開始。 這是一個Plunker鏈接，其中包含基於原始代碼的示例。

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

在其中，我使用Javascript對象的基本數組創建了一個數據集。 

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." }
  ];

然后，我創建了一些簡單的函數來管理模態導航，包括檢查是否應該禁用導航鏈接。 我也使用javascript觸發器打開模態，因此您可以在點擊時加載相應的項目。 

var currentItem = 0;

function prevImg() {
  if (currentItem > 0) {
    currentItem--;
  }
  loadData();
}

function nextImg() {
  if (currentItem < data.length - 1) {
    currentItem++;
  }
  loadData();
}

function loadData() {
  $("#modalTitle").html(data[currentItem].title);
  $("#modalImg").attr("src", data[currentItem].src).attr("alt", data[currentItem].title);
  $("#modalText").html(data[currentItem].description);

  // enable/disable nav buttons  
  $("#navPrev").removeAttr("disabled");
  $("#navNext").removeAttr("disabled");

  if (currentItem == 0) {
    $("#navPrev").attr("disabled", "disabled");
  }
  else if (currentItem == data.length - 1) {
    $("#navNext").attr("disabled", "disabled");
  }
}

function openModal(idx) {
  currentItem = idx;
  loadData();
  $("#modal").modal();
}

為了加載數據，我循環遍歷數據集並附加縮略圖的HTML。 這有點復雜，但仍然不是很糟糕。 

$(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>');
  }
});

這樣，您可以將HTML縮小為僅使用一個模式對話框。 我還在主體內包含導航鏈接，而不是使用頁腳中的按鈕。 

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

最后，這里有一些簡單的樣式來格式化導航鏈接。 

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

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

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

希望有所幫助！

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 我打開模態時添加下一個和上一個按鈕 如何為此自定義滾動添加下一個和上一個按鈕？ 如何為JS標簽添加下一個/上一個按鈕 如何將下一個和上一個按鈕添加到圖像庫 如何添加下一個上一個按鈕彈出？ 如何使用SoundCloud API添加Previous和Next按鈕 如何在彈出窗口上制作帶有下一個和上一個按鈕導航的模態滑塊 如何使用導航菜單按鈕（第一，上一個，下一個，最后一個）插入數組 使用 JavaScript 將下一個和上一個按鈕添加到模態 如何在video.js中添加上一個和下一個按鈕
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM