我已经创建了图像缩略图并使用以下代码链接了该缩略图。
<!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>现在我想将导航按钮(上一个和下一个)添加到模态窗口，该窗口将显示图像以及描述图像的段落。 因此，一旦显示模态窗口，我就不必关闭窗口并一遍又一遍地返回缩略图。一次，通过添加导航按钮显示模态窗口我想去寻找所需的图像及其描述。 我怎么可能去做这个？
最佳答案
您可以使用 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
关于javascript - 如何将导航按钮(上一个和下一个)添加到模态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37120255/