javascript - 使用 Bootstrap 的模态弹出窗口

Question

我对 html 和 javascript 很陌生。我试图在我的 index.html 文件中弹出一个模式，但是当我使用 href 时，它只是转到另一个页面。当我在 index.html 文件中编写 modal.html 时，它工作得很好。它在我的 css 设计中很好地弹出，但是当我将它放在一个单独的文件中时，它会将我带到另一个页面。如果我将它们保存在同一个索引文件中，我的索引页面中将有很多模态。所以如果我能把它们放在单独的文件中就好了。

这是我的index.html

<div id="three"> <div class="certificate"> Certificate Programs</div>
           <div class="button" id="net" data-toggle="modal" data-target="myModal"> <a href='modal.html' class="myButton">Networking Tech</a></div>
            <div class="button"><a href="#" class="myButton">Information Security</a></div>
           <div class="button"><a href="#" class="myButton">Software Development</a></div>
           <div class="button"><a href="#" class="myButton"> Database Technology Certificate</a></div>         
</div>

这是我的 modal.html:

<div id="myModal" class="modal fade" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Network Technology Certificate</h4>
            </div>
            <div class="modal-body">
                <p>Need any three courses for this cetificate.</p>
                <ul>
                    <li>IT 360 Intro to Networking(4)</li>
                    <li>IT 460 Net& Sec Protocol (4)</li>
                    <li>IT 462 Net Administration and Progr (4)</li>
                    <li>IT 483 Web Application and User Inter (4)</li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Answer 1

您应该像这样添加按钮或链接:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"></button>

注意 data-target="exampleModal"，这应该是你的模态的 id。在您的情况下，它是“myModal”。

这将始终将您重定向到新页面，因为它是 div 内部的链接并且它不知道它必须打开模态:

<div class="button" id="net" data-toggle="modal" data-target="myModal"> <a href='modal.html' class="myButton">Networking Tech</a></div>

尝试更改 CSS，或将其设置为如下所示:

<a href="#" class="button" data-toggle="modal" data-target="#exampleModal">Networking Tech</a>

所以最后你会得到这样的东西:

<div id="three"> <div class="certificate"> Certificate Programs</div>
           <a href="#" class="button" data-toggle="modal" data-target="#exampleModal">Networking Tech</a>
            <div class="button"><a href="#" class="myButton">Information Security</a></div>
           <div class="button"><a href="#" class="myButton">Software Development</a></div>
           <div class="button"><a href="#" class="myButton"> Database Technology Certificate</a></div>         
</div>

我也建议在这种情况下使用无序列表。