How to embed contents of other URL in pop-up/overlay?

Question

I'm looking to have an anchor on my page that, when clicked, displays an overlay/pop-up (I'm not sure of the correct terminology - what I am referring to is when the page in the background gets greyed out until the pop-up/overlay is closed).

The contents of the overlay should not be static, rather they are to be pulled from a named URL. In effect then, the overlay acts as a window into the other URL

With a good knowledge of HTML but zero of CSS or Javascript, I welcome any and all suggestions.

Thanks.

Answer 1

Without any knowledge of your specific setup it's difficult to fully comprehend exactly what you're looking to accomplish, but here's what I would do.

If you haven't already, look into jQuery. Specifically jQueryUI. jQueryUI has the "pop-up" effect that you're looking for built into it (called a "modal"). Implementing these libraries is as simple as including the JavaScript files in your HTML, and then writing just a few lines of JavaScript (jQuery variety) to attach the necessary JS handlers to the DOM. Take a look at the "view source" link on this page to see exactly how to setup the modal.

Once you have that up and running, refer to the $.ajax function of jQuery on the api page (I can't place any more links or I'd link you). The general idea here is that you'll make the AJAX request to the URL of your choice, then using JS (or jQuery) insert that content into the that you setup earlier for the modal. Once the data has been inserted you'll then call the modal to open, which will now have the content you requested via AJAX.

Here's a jsfiddle that will show you the bare minimum you'll need to get this up and running.

$(function() {
    $( "#dialog-modal" ).dialog({
        height: 140,
        modal: true,
        autoOpen: false
    });

    $(document).on("click", ".load-modal", function(event){
        event.preventDefault();
        $.ajax({
          url: "your_url.php",
          cache: false,
          method: 'post',
          success: function(data){
            $("#dialog-modal").append(data);
          }
        });
        $("#dialog-modal").dialog("open");
    });
});

Answer 2

If what you want is a modal dialog, you can accomplish this without writing any javascript/CSS by creating a Bootstrap modal and then giving a normal link just two additional attributes:

data-toggle="modal"
data-target="#yourModal"

This solution requires Bootstrap.