Question

我已创建图像缩略图并使用以下代码链接该缩略图。

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

现在我想在模态窗口中添加导航按钮（上一个和下一个），该窗口将显示图像以及描述图像的段落。因此，一旦显示模态窗口，我就不必关闭窗口并一遍又一遍地回到缩略图图像。一次，通过添加我想要去的所需图像及其描述的导航按钮来显示模态窗口。我怎么可能这样做？

Answer 1

您可以使用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

Answer 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;
}

希望有所帮助！

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

2 个答案: