7

I have to load a page (internal URL) in a modal window. I had been using window.showModalDialog(url, null, features) but this does not work properly on Safari,Chrome. So we decided to use Bootstrap's modal dialog instead. I'm unable to make this work. Any ideas what I could be doing 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>
agentx
  • 375
  • 2
  • 3
  • 13

2 Answers2

13

If you're going to continue down the bootstrap path, you could take a look here: jsfiddle - remote URI in Bootstrap 2.3.2 modal

Note that the URL will need to be on the same domain (though you mentioned it is "internal") or your domain will need to be allowed by the remote site's Access-Control-Allow-Origin settings. So keep in mind that the fiddle demo can't actually load 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 don't need to write any custom JavaScript for this - Bootstrap will know what to do based on the data-attributes like data-remote="http://example.com/whatever" and data-target="#myModal" etc.

See the relevant section of the Bootstrap modal docs for more info...

Edit: It turns out that changing the remote URL dynamically isn't as easy as it could be. Hopefully this answer will help you further.

Community
  • 1
  • 1
codebyren
  • 690
  • 6
  • 10
  • Yes. But i wouldn't know the data target until run time. How do I dynamically set it up? – agentx Aug 14 '13 at 19:19
  • @agentx bootstrap will take care of that. You just need to put the url in the `data-remote` attribute and let the `
    ` be empty. The bootstrap will fill the body with the content of the url in `data-remote`     – orezvani Aug 15 '13 at 13:58
0

Alternatively you could use fancy box. 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

Ram Pratap
  • 1,079
  • 11
  • 8