Is it possible to create a bootstrap 3 modal from HTML code that is not in the DOM?

Question

I have a bootstrap 3 modal's html in a variable (in-memory), eg:

  var modalHTML = "<div class='modal'>...etc...</div>"

(Wondering why? because it was generated from a Handlebars.js template)

I don't want to append that piece of html to the DOM, because I would have to care about repeated id's, etc, etc.

I want to modalize that piece of html.

In bootstrap 3 one modalizes this way:

 $("#foo").modal();

Question is: Can I modalize my piece of html?

Of course I tried this but doesn't work:

 modalHTML.modal();

Edit with real code:

  var place = {...}
  var template = Handlebars.compile($("#place-modal-template").html());
  template(place).modal();

I made a fiddle: http://jsfiddle.net/u7bvfkd7/ It is interesting that the backdrop causes a problem. — Malk, Sep 03 '14 at 22:21
The reason the backdrop was being left in tact is due to having HTML comments in the template! (http://stackoverflow.com/a/18743080/575199) ... new fiddle: http://jsfiddle.net/2t5Lv3q5/ — Malk, Sep 03 '14 at 22:28

score 4 · Accepted Answer · answered Sep 19 '14 at 20:17

My whole problem with inserting the modal to the DOM was: (quoted from my question)

I don't want to append that piece of html to the DOM, because I would have to care about repeated id's, etc, etc.

This wasn't a problem at the end(*) so I did this:

View:

<script type="text/x-handlebars" id="place-modal-template">
    <div id="my-modal" (...)
</script>

<!-- Tthis is what I didn't wanted to have but ended up writing: -->
<div id="modal-container"></div>

Code:

var place = {...}
var template = Handlebars.compile($("#place-modal-template").html());

// Original intention was to not insert into DOM, like this:
// template(place).modal();
//
// But ended up doing this:

$("#modal-container").html(template(place));
$("#my-modal").modal();

(*) It wasn't a problem because instead of $("#modal-container").append(...) I used .html(...)

score 3 · Answer 2 · answered Sep 03 '14 at 22:18

You could try something like this:

$(function(){
  var modalHTML = "<div class='modal' id='test'><div class='modal-dialog'><div class='modal-content'><div class='modal-header'>";
  modalHTML += "<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button><h4 class='modal-title'>Modal title</h4>";
  modalHTML += "</div><div class='modal-body'>Content for the dialog / modal goes here.</div><div class='modal-footer'>";
  modalHTML += "<a href='#' data-dismiss='modal' class='btn'>Close</a><a href='#' class='btn btn-primary'>Save changes</a></div></div></div>"; 
  var test = $.parseHTML( modalHTML );
  console.log(test);
  $(test).modal();
});

Working fiddle: http://jsfiddle.net/robertrozas/wpu7hogc/3/

hmm this semi worked: the modal shows up but when I close it the backdrop (black 90%) is still there. This is the code: `var template = Handlebars.compile($("#place-modal-template").html());; var test = $.parseHTML(template(place)); $(test).modal();` — sports, Sep 03 '14 at 23:12

score 0 · Answer 3 · edited May 23 '17 at 12:23

You can pass raw HTML code to $, i.e. $("<div>Hello, World!</div>") is ok in jQuery. You can use this feature to build an element which is not in the document DOM, and if it is a modal you can call .modal("show") on it as they do in the Bootstrap 3 docs.

It is crucial that the aforementioned HTML code consists of a single element i.e. the modal from the Bootstrap 3 docs is not ok because it has a trailing comment , as noted by gasman in his answer to another question.

function showModal(title, body) {
    var html = '<div class="modal fade" tabindex="-1" role="dialog">' +
    '<div class="modal-dialog">' +
    '<div class="modal-content">' +
    '<div class="modal-header">' +
    '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
    '<h4 class="modal-title">' + title + '</h4>' +
    '</div>' +
    '<div class="modal-body">' +
    '<p>' + body + '</p>' +
    '</div>' +
    '<div class="modal-footer">' +
    '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
    '<button type="button" class="btn btn-primary">Save changes</button>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div>';

    var modal = $(html);
    modal.modal("show");
}

Is it possible to create a bootstrap 3 modal from HTML code that is not in the DOM?

3 Answers3

Working fiddle: http://jsfiddle.net/robertrozas/wpu7hogc/3/