Bootstrap modal load entire HTML from external file

Question

Using: Bootstrap 4.1.3

Here is one solution but this is not exactly what i am looking for: Bootstrap Modal Dynamic Content

I am getting the content (the entire modal html) from an external file and then i need to show it as a modal.

How to display data in the modal

$.get("test.html", function(data) {
    ???
});

I am trying to avoid this alternate approach, where i can append a div to body, put data in it and then do modal.

$.get("test.html", function(data) {
    //$('<div />', { id: 'holdy' }).appendTo('body');

    var $holdyDiv = $('<div />').appendTo('body');
    $holdyDiv.attr('id', 'holdy');

    //append data 
    $holdyDiv.innerHtml(data);

    //do modal
    $('#divInData').modal('show');  
});

Forgot to mention, this call is happening once the page has finished loading.

Well if the modal is in test.html, you may not be able to open it unless you append it to the body. — Anurag Srivastava
– Anurag Srivastava, Commented Mar 2, 2019 at 18:45
Well that is exactly what i am trying to accomplish. There should be a way to trigger modal with dynamic content, i am missing something very simple here. — learning...
– learning..., Commented Mar 2, 2019 at 18:47
So the entire modal html is in test.html? The question says modal "content". — Carol Skelly
– Carol Skelly, Commented Mar 2, 2019 at 19:28

Carol Skelly · Accepted Answer · 2019-03-02 20:07:52Z

5

You should use jQuery $.load instead of $.get which allows you to specify the selector for the remote modal. Then all you need to do is:

$('body').load("test.html #myModal",function(){
   $('#myModal').modal();
});

Either way the Modal HTML must be added to the DOM of the "host" page that's loading the modal.

Demo:
https://www.codeply.com/go/AQazBWdsrZ ("host" page)
https://www.codeply.com/go/sE77hS1hHs ("remote" page - modal HTML only)

edited Mar 2, 2019 at 20:07

answered Mar 2, 2019 at 19:59

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

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

1 Comment

Yom T. Over a year ago

Very interesting approach. Led me to this official docs on loading page fragments. +1

Yom T. · Accepted Answer · 2019-03-02 19:11:03Z

2

How about updating the modal contents on show.bs.modal event?

show.bs.modal

This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

At this point, you could manipulate the contents before the modal is displayed, and shown.bs.modal triggers.

$('.modal').on('show.bs.modal', function(e) {
  const id = e.relatedTarget.dataset.postid;
  
  $.get('https://jsonplaceholder.typicode.com/posts/' + id)
    .then(data => {
      $('.modal-title', this).text(data.title);
      $('.modal-body', this).html(data.body);
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-postid="1">
  Launch demo modal #1
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-postid="2">
  Launch demo modal #2
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

edited Mar 2, 2019 at 19:11

answered Mar 2, 2019 at 19:05

Yom T.

9,1982 gold badges35 silver badges52 bronze badges

11 Comments

learning... Over a year ago

modal-body needs to be available in the dom. In my case, i have the data from remote url as html. I need to show this html as a modal.

Yom T. Over a year ago

@learning... It is available in the DOM when you first trigger the modal visibility. From there, you should be able to do something like: $('.modal-body', this).html(__your_html_data__).

learning... Over a year ago

Forgot to mention, this call is happening once the page has finished loading.

Yom T. Over a year ago

@learning... I believe that should make no difference. If you inspect the .modal element, you could see that it is there, only set to display:none by CSS. Unless I'm missing your point.

learning... Over a year ago

My full modal structure is coming from the test.html file

|

Collectives™ on Stack Overflow

Bootstrap modal load entire HTML from external file

2 Answers 2

1 Comment

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related