Pop-up on the same page using JavaScript/JQuery

Question

I want to make a link on an HTML page, so that when the user clicks on it, a "pop-up" with a certain image appears. Now, the main thing is that I don't want this pop-up to be a new tab/window in the browser. I want it to be part of the page itself. It would be great if the pop-up can be moved around the page just like a separate window.

Is there a JavaScript/JQuery library that could achieve this?

Answer 1

This should do it: http://jsfiddle.net/55DBx/1/

Utilizes jQuery and jQuery UI. Good luck!

jQuery:

$( "#dialog" ).dialog({ autoOpen: false });
$( "#btnExample" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});

Html:

<button id="btnExample">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>

Answer 2

The jQueryUI Dialog is exactly what you are looking for.

You can define your popup "window" in a DIV, like this:

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

And then you can show the dialog, via jQuery, when the user clicks a link, like this:

<script>
    $("#YourLink").click(function(e) {
        e.preventDefault();
        $("#dialog").dialog();  
        return false;  
    });  
</script>

Answer 3

You probably want to take a look at Bootstrap modals: http://getbootstrap.com/javascript/#modals

or jquery ui dialog: http://jqueryui.com/dialog/