Простой JQuery Pop Up

Question

Я пытаюсь реализовать самое простое, простое всплывающее окно jquery.

В настоящее время я использую код из этого учебного пособия и заменяю fades на .open().Окно всплывает, но поскольку событие связано с несколькими ссылками, пользователь может щелкнуть по нему где угодно, но всплывающее окно отображается в одном и том же месте, независимо от положения пользователя на пейге.

Как мне получить всплывающее окно, чтобы настроить положение пользователя на странице (точно так же, как всплывающее окно с гиперссылкой в ​​редакторе SO)?

Спасибо.

Answer 1

У меня есть интерактивная всплывающая интерактивность с использованием .offset() геттера и .css('line-height') в качестве живого образца .

Установщик .offset() не дает ожидаемых результатов в браузерах, отличных от Firefox. Я полагаю, что это главная причина, по которой попытка получить простое всплывающее окно является такой «сложной» ... В приведенном ниже примере обратите внимание, как вместо offset() используется *1009*:

$('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 2

Вы должны проверить Shadowbox - http://www.shadowbox -js.com

Это может быть сделано так, как вам хочется, и его очень легко использовать и внедрять в вашу систему.

Answer 3

Вы также можете использовать Jquery.cluetip , чтобы получить тот же эффект.И он всегда будет открываться рядом с ссылкой.

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

Вместо <a href="#">, попробуйте: <a href="#dialog"> и замените <div id="dialog" class="window"> на <div id="dialog" class="window" name="dialog">

В конечном итоге, переход к "#" находится вверху текущей страницы;вставляя именованный якорь в любое место, где ваше диалоговое окно появляется на экране, область просмотра будет установлена ​​таким образом, чтобы названный якорь (т. е. диалоговое окно) находился в верхней части экрана.