在将缩略图链接到模态时遇到问题

facing problems while linking thumbnails to modals

本文关键字：模态 遇到 问题 链接 略图      更新时间：2023-09-26

我正在尝试使用以下代码链接我使用引导程序框架（javascript）模式创建的thumbail。

<html>
<head>
  <link href="E:'bootstrap'css'bootstrap.min.css">
</head>
<body>
  <!--thumbnail section-->
  <section class="container">
    <div class="row add-bottom text-center">
      <a href="#migrant" class="thumbnail thumbnailstyle" data-toggle="modal">
        <img src="E:'Images'migrant100.jpg" alt="Project Image" class="imgStyle img-responsive center-block">
      </a>
      <br/>
      <br/>
      <a href="#water" class="thumbnail thumbnailstyle" data-toggle="modal">
        <img src="E:'Images'water.jpg" alt="Project Image1" class="imgStyle img-responsive center-block" id="img2">
      </a>
    </div>
  </section>
  <!--Modal-->
  <div id="migrant" class="modal fade hide" tabindex="-1">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">x
        <button>
          <h3>Migants</h3>
    </div>
    <div class="modal-body">
      <p>
        <img src="E:'Images'migrant100.jpg" alt="migrant01" class="pull-right">The Grapes of Wrath is an American realist 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 class="modal-footer">
      <button class="btn" data-dismiss="modal">Close</button>
    </div>
  </div>
  <div id="water" class="modal hide fade" tabindex="-1">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">x</button>
      <h3>Water</h3>
    </div>
    <div class="modal-body">
      <p>
        <img src="E:'Images'water.jpg" 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 class="modal-footer">
      <button class="btn" data-dismiss="modal">Close</button>
    </div>
  </div>
  <script src="E:'bootstrap'js'bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
  </script>
</body>
</html>

当我点击特定的图像缩略图时，什么都没有发生。我刚开始使用bootstrap这样的框架，所以我真的不知道我定义的模态类（模态、模态头、模态体等）是否也需要包含在css文件中。我也做了定制。但是，我没有得到任何结果。

任何建议都将不胜感激。

为了让你的bootstrap pop正常工作，你基本上需要jquery库、bootstap js和bootstrap css。下面的片段将帮助您实现它。

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

你的缩略图部分应该是：

<!--thumbnail section-->
<section class="container">
    <div class="row add-bottom text-center">
        <a href="#migrant" class="thumbnail thumbnailstyle" data-toggle="modal">
            <img src="~/Images/migrant100.jpg" alt="Project Image" class="imgStyle img-responsive center-block">
        </a>
        <br />
        <br />
        <a href="#water" class="thumbnail thumbnailstyle" data-toggle="modal">
            <img src="~/Images/water.jpg" alt="Project Image1" class="imgStyle img-responsive center-block" id="img2">
        </a>
    </div>
</section>

您的模态内容：

    <div class="modal fade" id="migrant" role="dialog">
    <div class="modal-dialog">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <div class="modal-content">
            <div class="modal-header">
                <h3>Migants</h3>
            </div>
            <div class="modal-body">
                <div class="modal-footer txt_center">
                    <p>
                        <img src="~/Images/migrant100.jpg" alt="migrant01" class="pull-right">The Grapes of Wrath is an American realist 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">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <div class="modal-content">
            <div class="modal-header">
                <h3>Water</h3>
            </div>
            <div class="modal-body">
                <div class="modal-footer txt_center">
                    <p>
                        <img src="~/Images/water.jpg" 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>
相关文章：