beef beef - 6 months ago 18
jQuery Question

Is there a way for me to use a template from an html file and use it on bootstrap modal?

So, here's the deal, I dont want to put this, because I think it's really tacky and confusing.:

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

var modal = $(html);

What I want to happen is, remove the contents of
var html
and save it in a separate html file and just load the thing
. Is there a way to do that with jquery? the quotes and plus signs could easily get messy and I dont want that. Sorry if it's a bit of a noob question.


It's really easy. save your modal html codes in modal.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 class="modal-body"> 
<p>  body  </p> 
<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> 
  1. You can use an Iframe and put it in the modal content place.

like this:

<iframe src="/content/modal.html"></iframe>
  1. Or if you want to do this only with Jquery you can use load function: