Load Content for Bootstrap 4 Modal Externally Using JavaScript/ jQuery

Question

I'm a beginner to coding and I have a project that is using a Bootstrap 4 modal. Currently, the content is inside the HTML page and I want the content to be generated from an external HTML file. Is this possible?

To clarify it further, what I want is put the HTML code of the modal inside a separate HTML file and load the modal content from there with jQuery/JavaScript when needed, instead of putting it inside my index files.

I currently use this code to make the modal.

 if(status){
        $('#mMessage').modal()
    }

and HTML

<div class="modal fade" id="mMessage" tabindex="-1" role="dialog" aria-labelledby="mMessageLabel">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">

        <h4 class="modal-title" id="mMessageLabel">Requirements Not Met</h4>

      </div>
      <div class="modal-body">Please select atleast one.</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Any assistance you can provide would be greatly appreciated. Thanks.

using js vanilla : stackoverflow.com/questions/41921805/…

kemicofa
– kemicofa

2019-10-18 13:17:34 +00:00
Commented Oct 18, 2019 at 13:17 — kemicofa
– kemicofa, Commented Oct 18, 2019 at 13:17

Tharavink Prasad Sivarajan · Accepted Answer · 2019-10-18 13:14:37Z

3

Do have a look at the JQuery load method.

function myfunction() {
    if(status){
        $('#mMessage').load('./another_page.html');
        $('#mMessage').modal("show");
    }
}

Div with the mMessage id must be in current page. The contents inside will be loaded from different page.

How to handle failed response and how to pass parameters are explained in the JQuery documentation attached above.

answered Oct 18, 2019 at 13:14

Tharavink Prasad Sivarajan

3901 gold badge4 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Berglund Over a year ago

Thank you. But with this option the modal doesn't close properly.

Sai Surya K · Accepted Answer · 2019-10-18 13:02:27Z

-2

$('#mMessage').modal("show")

I think This may Help You

answered Oct 18, 2019 at 13:02

Sai Surya K

111 silver badge1 bronze badge

Collectives™ on Stack Overflow

Load Content for Bootstrap 4 Modal Externally Using JavaScript/ jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related