Question

我想在HTML页面上建立一个链接，以便当用户点击它时，弹出一个＆＃34;弹出＆＃34;出现一定的图像。现在，主要的东西是我不希望这个弹出窗口成为浏览器中的新标签/窗口。我希望它成为页面本身的一部分。如果弹出窗口可以像一个单独的窗口一样在页面周围移动，那就太好了。

是否有可以实现此目的的JavaScript / JQuery库？

Answer 1

这应该这样做：http://jsfiddle.net/55DBx/1/

使用jQuery和jQuery UI。祝你好运！

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

jQueryUI Dialog正是您所寻找的。

您可以在DIV中定义弹出窗口，如下所示：

<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>

然后，当用户点击链接时，您可以通过jQuery显示对话框，如下所示：

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

Answer 3

你可能想看一下Bootstrap模态：http://getbootstrap.com/javascript/#modals

或jquery ui对话框： http://jqueryui.com/dialog/

使用JavaScript / JQuery在同一页面上弹出

3 个答案: