Question

我正在尝试实现最基本的普通jquery弹出窗口。

目前，我正在使用this教程中的代码，并用.open（）替换淡化。窗口弹出，但由于事件绑定到多个链接，用户可以在任何地方点击它，但弹出窗口显示在同一个地方，无论用户在paege上的位置如何。

如何让弹出窗口调整到用户在页面上的位置（就像SO编辑器中的超链接弹出窗口一样）？

感谢。

Answer 1

你应该查看Shadowbox - http://www.shadowbox-js.com

它可以根据需要制作，并且非常易于使用和实施到您的系统中。

Answer 2

我使用.offset() getter和.css('line-height')作为live sample进行简单的弹出交互。

.offset() setter不会在Firefox以外的浏览器上产生预期的结果。我相信这是为什么尝试简单弹出是如此“具有挑战性”的主要原因...在下面的示例中，请注意如何使用.css() setter而不是offset()：

$('li > a').click(function (event) {
    event.preventDefault();
    var coordinates = $(this).offset();
    var lineHeight = parseInt($(this).css('line-height'));

    if (window.console) { console.log("coordinates.left: " + coordinates.left); }
    if (window.console) { console.log("coordinates.top: " + coordinates.top); }
    if (window.console) { console.log(".css('line-height'): " + lineHeight); }

    $('.PopUpFlow')
        .css('left', coordinates.left)
        .css('top', coordinates.top + lineHeight)
        .show();
});
$('.PopUpFlow p > a').click(function (event) {
    event.preventDefault();
    $(this).closest('div').hide();
});

Answer 3

而不是<a href="#">，请尝试：<a href="#dialog">并将<div id="dialog" class="window">替换为<div id="dialog" class="window" name="dialog">

最终，转到“＃”是当前页面的顶部;通过在屏幕上显示对话框的位置插入命名锚点，将设置视口，使得命名锚点（即对话框）位于屏幕顶部。

Answer 4

你想将弹出窗口相对于另一个元素定位吗？（你点击或悬停在等...）？在那种情况下

popup_location = $('#clickme').offset();

//optional adjust position
popup_location['top'] = popup_location['top'] + 20;
popup_location['left'] = popup_location['left'] + 20;

$('#your_popup').css(tooltip_position);

Answer 5

您也可以使用Jquery.cluetip获得相同的效果。并且它将始终在链接附近打开。

简单的JQuery弹出

5 个答案: