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

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

09-09 22:05
查看更多