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

Question

我试图使用以下代码链接我使用bootstrap框架（javascript）模式创建的thumnails。

 <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这样的框架，所以我真的不知道我定义的模态类（modal，modal-header，modal-body等）是否也需要在css文件中包含样式。 我也做了那个定制。但是，我没有得到任何结果。

任何建议都非常感谢。

Answer 1

为了让你的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>