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>

your ```data-target``` is invalid css selector. You have ```data-target="myModal"``` must be ```data-target="#myModal"``` — dorintufar, Aug 08 '18 at 08:20
modal and trigger are in separate html files? if yes, then try to put content in one file — dorintufar, Aug 08 '18 at 08:43
if I put the content in one file then it works fine but I have many modal contents in one page that is why I want separate files for my modal content. Is there any way I can call the modal content from separate file? — Alien321, Aug 08 '18 at 08:46
Maybe this will help [http://plnkr.co/edit/Y7jDj2hORWmJ95c96qoG?p=preview] — dorintufar, Aug 08 '18 at 08:53

Badza · Answer 1 · 2018-08-08T08:24:30.000

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.

Thank you for your answer. Yes the way you said it will works but I want to keep my modal in a separate html files and I want to call them in the index modal box from the separate file. I will have plenty of modal contents so I can not afford to keep all the html in the index file. — Alien321, Aug 08 '18 at 08:29
Ok, then you will need ajax to achieve this. Please try some of the following links: - https://www.codexworld.com/bootstrap-modal-dynamic-content-jquery-ajax-php-mysql/ ; https://stackoverflow.com/questions/14971766/load-content-with-ajax-in-bootstrap-modal — Badza, Aug 08 '18 at 08:32
This used to exist before in bootstrap, but now you have to do it manually. — Badza, Aug 08 '18 at 08:34

score 0 · Answer 2 · answered Aug 08 '18 at 08:27

0

Change your tag as below.

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

Give your modal id to href.

answered Aug 08 '18 at 08:27

Anuradha

570
6
20

href does not take the modal id. – Alien321 Aug 08 '18 at 08:42
This is already asked question. Please check this, https://stackoverflow.com/questions/32958219/getting-bootstraps-modal-content-from-another-page – Anuradha Aug 08 '18 at 08:57

score 0 · Answer 3 · answered Aug 08 '18 at 08:55

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>

Jaspreet Singh · Answer 4 · 2018-08-08T09:02:57.073

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>

Modal Pop-up using bootstrap

4 Answers4