Pop-up on the same page using JavaScriptJQuery - Stack Overflow

admin管理员组

文章数量:1405748

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?

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?

• javascript
• jquery
• html

Share Follow asked Sep 6, 2013 at 2:06 Mika H.Mika H. 4,3691313 gold badges4747 silver badges6464 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

This should do it: http://jsfiddle/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./javascript/#modals

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

本文标签： Popup on the same page using JavaScriptJQueryStack Overflow