我对 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">×</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>
最佳答案
您应该像这样添加按钮或链接:
<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>
我也建议在这种情况下使用无序列表。
关于javascript - 使用 Bootstrap 的模态弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51741597/