logo标签列表

如何在模态框中添加导航按钮（上一个和下一个）

javascriptjqueryhtmlcsstwitter-bootstrap
4
我已经创建了图像缩略图并使用以下代码链接了该缩略图。 

<!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个回答
4
您可以使用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

如何为多个缩略图实现相同的功能？ - d.d.
在按钮的onclick事件中使用示例函数“showModal”作为回调，并传递要显示的缩略图的ID。 - JSierra
这样代码会变得非常冗长，对于多个缩略图的情况，实现起来会很困难。因此，我想将缩略图放入一个数组中。我该如何实现呢？ - d.d.
2

我不确定您对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;
}

希望这能有所帮助！
我尝试了上面的代码，但是得到了一些不理想的结果（同时显示多个缩略图和模态框），这与在Plunker中显示的结果完全不同。此外，在Plunker中，我还注意到指定缩略图对应的模态框未被显示，而是默认显示第一个模态框。我还希望在达到第一个/最后一个模态框时取消上一个/下一个按钮。如何在模态框主体中使用导航箭头，以便重定向到前一个/后一个模态框，而不是将按钮放在模态框页脚中？ - d.d.
我已经更新了答案，添加了其他功能并修复了始终在单击时显示第一个项目的问题。如果您直接使用这段代码，它将正常工作。我强烈建议您在线寻找一些课程，以帮助您更好地理解jQuery和Bootstrap。 - WonderGrub
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接