How to show url in Bootstrap Modal dialog: button click

Question

I need to load a page (internal URL) into a modal window. I used window.showModalDialog (url, null, features), but this does not work properly in Safari, Chrome. Therefore, we decided to use the Bootstrap modal dialog instead. I can not do this job. Any ideas what I can do wrong?

//imports <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <link href="css/bootstrap.min.css" rel="stylesheet"> //activate content as modal $(document).ready(function(){ $('#test_modal').modal({ }); } ....... ....... $("#btnSubmit").click(function(){ var url = constructRequestURL(); $('#test_modal').modal(data-remote=url,data-show="true"); }); ----- ----- <div class="modal fade" id="test_modal"> </div> 

Answer 1

If you are going to continue the boot path, you can look here: jsfiddle - remote URI in Bootstrap 2.3.2 modal

Note that the URL must be in the same domain (although you mentioned that it is "internal"), or your domain must be allowed by the Access-Control-Allow-Origin remote access settings. Therefore, be aware that the script demonstration cannot download content from example.com.

 <button type="button" class="btn" data-toggle="modal" data-target="#myModal" data-remote="http://example.com">Launch modal</button> <div id="myModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <!-- remote content will be inserted here via jQuery load() --> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> </div> </div> 

You do not need to write any custom JavaScript for this - Bootstrap will know what to do based on data attributes such as data-remote = "http://example.com/whatever" and data-target = "#myModal" and etc.

For more information, see the appropriate section of Bootstrap modal docs ...

Edit: It turns out that changing a dynamic URL dynamically is not as simple as it could be. Hope this answer helps you further.

Answer 2

Alternatively, you can use fancy boxing. Its simple and clean.

Take a look here: http://fancyapps.com/fancybox/3/docs/#ajax

 <a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;"> AJAX content