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?
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>
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>
You probably want to take a look at Bootstrap modals: http://getbootstrap.com/javascript/#modals
or jquery ui dialog: http://jqueryui.com/dialog/
