I am very new to html and javascript. I am trying to pop up a modal in my index.html file but when I am using href it is just going to a different page. When I write the modal.html in the index.html file it works completely fine. It pops up nicely with my css design but when I put it in a separate file it takes me to a different page. I will have a lot of modal in my index page if I keep them in the same index file. So it will be nice if I can put them in separate files.
this is my 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>
this is my 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>