簡單的jQuery拉網

我試圖實現最基本的，純jQuery的彈出窗口。簡單的jQuery拉網

目前，我正在使用的代碼從this教程，並更換變淡用。開（）。該窗口彈出，但隨着事件被綁定到多個環節，用戶可以在任何地方點擊，但彈出不管用戶對paege位置在同一個地方顯示出來。

如何獲得彈出窗口以適應用戶在頁面上的位置（與SO編輯器中的超鏈接彈出窗口完全相同）？

謝謝。

2011-02-01 kmurph79

你要選的任何回答您發現有幫助的問題，並接受最能幫助您的答案。這些行動有助於獎勵那些貢獻自己時間來幫助你的人，他們幫助具有類似問題的網站的未來用戶找到最佳答案，他們鼓勵人們回答你未來的問題，並幫助你的聲譽。 – Phrogz 2011-04-06 22:31:12

你應該檢查出太極拳 - http://www.shadowbox-js.com

可以做出基本的，只要你想，它是非常容易使用，並落實到你的系統。

來源

2011-02-01 11:27:51 xil3

是否有可能使用太極拳任何東西非常......我可以把形式呢？我不確定你是否看到過這個邪惡的應用程序，但我想彈出一個窗口，然後通過該窗口中的一系列步驟。 – 2012-10-14 16:19:58

相反的<a href="#">，嘗試：<a href="#dialog">與<div id="dialog" class="window" name="dialog">

最終取代<div id="dialog" class="window">，將「＃」是當前頁面的頂部;通過插入命名錨，其中的一次出現在屏幕上你的對話框，視口將被設置使得命名錨（即，對話）是在屏幕的頂部。

來源

2011-02-01 11:31:04 aendrew

是否要定位彈出相對於另一個元素？（你點擊或懸停在等...）？在這種情況下，

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

來源

2011-02-01 11:31:06 calumbrodie

您也可以使用Jquery.cluetip獲得相同的效果。它會一直打開接近鏈接。

來源

2011-02-01 11:32:29 Kimtho6

我使用.offset()獲得者和.css('line-height')作爲live sample的裸機彈出交互。

的.offset()制定者不會產生上比Firefox等瀏覽器的預期結果。我相信這是爲什麼努力得到一個簡單的彈出主要的原因是爲了「挑戰」 ...在下面的示例中，請注意.css()二傳手是如何使用的，而不是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(); 
});

來源

2011-02-23 02:22:18 rasx

簡單的jQuery拉網

回答

相關問題