Bootstrap 3 - How to download content in a modal body via AJAX?

Question

As you can see here , I have a button that launches a modal. Setting the href url for the button, this url is automatically loaded into the modal using Bootstrap 3. The fact is that this page is loaded into the modal root (as mentioned in the bootstrap 3 documentation for using modals ). I want to load it into a modal body.

Is there a way to do this using attributes (not javascript)? Or what is the most automatic way to do this?

PS I remember that in Bootstrap 2, content was loaded into the body, not the root directory.

Answer 1

Check this answer SO .

It seems like the only way is to provide the whole modular structure with your ajax response.

As you can check from the source code , the download function is bound to the root element.

If you cannot change the ajax response, a simple workaround could be to explicitly call the $(..).modal(..) plugin in your body element, although it will probably break the show / hide functions of the root element.

Answer 2

This is actually just super, just adding javascript. The href link is used as the source of ajax content. Note that for Bootstrap 3. * we set data-remote="false" to disable Bootstrap's obsolete boot feature.

JavaScript:

 // Fill modal with content from link href $("#myModal").on("show.bs.modal", function(e) { var link = $(e.relatedTarget); $(this).find(".modal-body").load(link.attr("href")); }); 

Html (based on official example ):

 <!-- Link trigger modal --> <a href="remoteContent.html" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default"> Launch Modal </a> <!-- Default bootstrap modal example --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <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" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </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> 

Try it yourself: https://jsfiddle.net/ednon5d1/

Answer 3

I think you are looking for this custom feature. It accepts the “drag and drop” attribute and dynamically creates the necessary div to host the remote content. Just put data-toggle = "ajaxModal" on any link you want to download via AJAX.

JS Part:

 $('[data-toggle="ajaxModal"]').on('click', function(e) { $('#ajaxModal').remove(); e.preventDefault(); var $this = $(this) , $remote = $this.data('remote') || $this.attr('href') , $modal = $('<div class="modal" id="ajaxModal"><div class="modal-body"></div></div>'); $('body').append($modal); $modal.modal({backdrop: 'static', keyboard: false}); $modal.load($remote); } ); 

Finally, in remote content, you need to include the whole structure.

 <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title"></h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <a href="#" class="btn btn-white" data-dismiss="modal">Close</a> <a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-primary">Another button...</a> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> 

Answer 4

An easy way to use modals is eModal !

Ex from github :

• Link to eModal.js <script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>

• use eModal to display modal for warning, ajax, request or confirmation

   // Display an alert modal with default title (Attention) eModal.ajax('your/url.html'); 

 $(document).ready(function () {/* activate scroll spy menu */ var iconPrefix = '.glyphicon-'; $(iconPrefix + 'cloud').click(ajaxDemo); $(iconPrefix + 'comment').click(alertDemo); $(iconPrefix + 'ok').click(confirmDemo); $(iconPrefix + 'pencil').click(promptDemo); $(iconPrefix + 'screenshot').click(iframeDemo); ///////////////////* Implementation */////////////////// // Demos function ajaxDemo() { var title = 'Ajax modal'; var params = { buttons: [ { text: 'Close', close: true, style: 'danger' }, { text: 'New content', close: false, style: 'success', click: ajaxDemo } ], size: eModal.size.lg, title: title, url: 'http://maispc.com/app/proxy.php?url=http://loripsum.net/api/' + Math.floor((Math.random() * 7) + 1) + '/short/ul/bq/prude/code/decorete' }; return eModal .ajax(params) .then(function () { alert('Ajax Request complete!!!!', title) }); } function alertDemo() { var title = 'Alert modal'; return eModal .alert('You welcome! Want clean code ?', title) .then(function () { alert('Alert modal is visible.', title); }); } function confirmDemo() { var title = 'Confirm modal callback feedback'; return eModal .confirm('It is simple enough?', 'Confirm modal') .then(function (/* DOM */) { alert('Thank you for your OK pressed!', title); }) .fail(function (/*null*/) { alert('Thank you for your Cancel pressed!', title) }); } function iframeDemo() { var title = 'Insiders'; return eModal .iframe('https://www.youtube.com/embed/VTkvN51OPfI', title) .then(function () { alert('iFrame loaded!!!!', title) }); } function promptDemo() { var title = 'Prompt modal callback feedback'; return eModal .prompt({ size: eModal.size.sm, message: 'What\ your name?', title: title }) .then(function (input) { alert({ message: 'Hi ' + input + '!', title: title, imgURI: 'https://avatars0.githubusercontent.com/u/4276775?v=3&s=89' }) }) .fail(function (/**/) { alert('Why don\'t you tell me your name?', title); }); } //#endregion }); 

 .fa{ cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/united/bootstrap.min.css" rel="stylesheet" > <link href="http//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="row" itemprop="about"> <div class="col-sm-1 text-center"></div> <div class="col-sm-2 text-center"> <div class="row"> <div class="col-sm-10 text-center"> <h3>Ajax</h3> <p>You must get the message from a remote server? No problem!</p> <i class="glyphicon glyphicon-cloud fa-5x pointer" title="Try me!"></i> </div> </div> </div> <div class="col-sm-2 text-center"> <div class="row"> <div class="col-sm-10 text-center"> <h3>Alert</h3> <p>Traditional alert box. Using only text or a lot of magic!?</p> <i class="glyphicon glyphicon-comment fa-5x pointer" title="Try me!"></i> </div> </div> </div> <div class="col-sm-2 text-center"> <div class="row"> <div class="col-sm-10 text-center"> <h3>Confirm</h3> <p>Get an okay from user, has never been so simple and clean!</p> <i class="glyphicon glyphicon-ok fa-5x pointer" title="Try me!"></i> </div> </div> </div> <div class="col-sm-2 text-center"> <div class="row"> <div class="col-sm-10 text-center"> <h3>Prompt</h3> <p>Do you have a question for the user? We take care of it...</p> <i class="glyphicon glyphicon-pencil fa-5x pointer" title="Try me!"></i> </div> </div> </div> <div class="col-sm-2 text-center"> <div class="row"> <div class="col-sm-10 text-center"> <h3>iFrame</h3> <p>IFrames are hard to deal with it? We don't think so!</p> <i class="glyphicon glyphicon-screenshot fa-5x pointer" title="Try me!"></i> </div> </div> </div> <div class="col-sm-1 text-center"></div> </div>