DesignTutorial

How to display a page in a modal window popup

Black Friday Web Hosting Sale

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.

Tags
Show More

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close

Adblock Detected

Please consider supporting us by disabling your ad blocker