How to display a page in a modal window popup

November 27, 2018

In this post we will tell you about method of using Modal box to display a complete .HTML file in Modal box rather opening it in new window or tab.

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.

Comments 0

Leave a Reply

Your email address will not be published. Required fields are marked *