Modal Pop-up using bootstrap

Question

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">&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

You should add button or link like this:

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

Notice data-target="exampleModal", this should be id of your modal. In your case it is "myModal".

This will always redirect you to the new page because it is link inside of the div and it doesn't know that it has to open modal:

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

Try to change CSS, or set it something like this:

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

So at the end you would have something like this:

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

I also recommend using of unordered list in this scenario.

Answer 2

Change your tag as below.

<a data-toggle="modal" href="#myModal" class="myButton">Networking Tech</a>

Give your modal id to href.

Answer 3

In index.html page use this. You have to use href and data-target

<a href="modal.html" data-toggle="modal" data-target=".test-form" class="btn btn-primary">booking enquiry</a>   

<div id="myModal19" class="modal fade test-form" role="dialog" style="background:rgba(0,0,0,0.8);">
    <div class="modal-dialog modal-md">
      <!-- Modal content-->
      <div class="modal-content"> </div>
    </div>
  </div>

In modal.html

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

Answer 4

If using Jquery is an option

index.html

<div id="three"> <div class="certificate"> Certificate Programs</div>
    <a data-toggle="modal" href="myModal.html" data-target="#myModal" >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>
<script>
$('[data-toggle="modal"]').click(function(e) {
    e.preventDefault();
    var modal = $(this);
    $.ajax({
        url: modal.attr('href'),
        dataType: 'text',
        success: function(data) {
            $('body').append(data);
            $(modal.attr('data-target')).modal('show');
        }
    });
});
</script>

myModal.html

<div id="myModal" class="modal fade" role="dialog" aria-hidden="true">
<!-- 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>