Loading a complete HTML Page in Modal Box

Question

Ok so now it has been a day almost in searching about Modal box to display a complete .HTML file in Modal box rather opening it in new window or tab.

More precisely:

<a href="ajax.html" rel="modal:open">example</a>

This ajax.html file should open in "modal box" in the same window.

How can I acheive it through anchor tag?

I have searched thoroughly but found no good solution except this one(Example#4). This works on site but doesn't work when I download it.

.

P.S: I do not want to use iframe.

Answer 1

There are a few different ways to do this, but the best way is to use an AJAX request to the page using jQuery:

$.post("ajax.html", function(data){

    $("#myModalDiv").html(data).fadeIn();

});

Then to bind this to your anchor, assign it an ID and do this in your $(document).ready():

$(document).ready(function(){

    $("a#someId").on("click", function(){
        
        //Put the code from above here.

    });

});

---

Note that this will only work for files on the same domain.

If you want to use files on a different domain, you will have to use an iframe, therefore I cannot put this into a fiddle because there are no local files to pull on a fiddle.

Answer 2

You can use bootstrap for the thing you want to do.

http://getbootstrap.com/javascript/

Check out the modal section.