用JQuery做彈出窗口/對話框的最佳方法？

我以前做過一些彈出窗口/對話框，現在我已經在（）中出現了迴歸錯誤，並且想要重新編碼爲DIV /彈出窗口/對話框使用JQuery。移動到Jquery將是一個優勢，因爲我們可以爲對話框/彈出窗口啓用重新定位和調整大小，如果彈出窗口只是將其自身放置在其他元素上的DIV，則我們不能這樣做。用JQuery做彈出窗口/對話框的最佳方法？

現在我想知道什麼是使用JQuery彈出/對話框/ DIV出現的「最佳」方式？我寧願不添加插件，只包含基本的JQuery文件。你能告訴我該怎麼做嗎？

當前頁面使得類似彈出窗口，但它不可重定位。

來源

2012-06-15 Niklas Rosencrantz

你是指什麼意思最好的方式呢？ – Sarfraz

應該有一種方法來編輯CSS並重新定位當前的對話框本身。 – Ananth

我會使用燈箱插件。 –

我會這樣做的方式是創建一個.popup類，其中包含彈出窗口的基本佈局功能。然後將該課程添加到頁面頂部隱藏的<div>。

然後，當需要彈出窗口時，請將它的draggable和resizable屬性分配給它。之後，從彈出窗口內容專用頁面請求.get()請求，然後從.show()加載彈出窗口的內容。

例

CSS

.popup 
{ 
    display:none; 
    position:absolute; 
    // some other nice styling features 
}

HTML

<body> 
<div class='popup'></div> 
... 
page content 
... 
</body>

的Javascript

function popup(){ 
    // for the draggable you may want to specify the drag handle like only the title of the popup 
    var popup = $('.popup'); 

    popup.draggable(); 
    popup.resizable(); 

    $.get('/getPopup.php?action=theKindOfPopupRequested', function(data) {   
     popup.html(data); 
     popup.show('fast'); 
    }); 
}

來源：

http://jqueryui.com/demos/resizable/

http://jqueryui.com/demos/draggable/

來源

2012-06-15 09:17:50 akalucas

-1這沒有奏效。即使將DIV設置爲顯示，DIV也正在渲染並在其他元素後面顯示：非激活腳本時沒有任何反應。 –

你必須明白，這不是一個即插即用的代碼。它是彈出窗口和需求定製所需的基本構建塊的一個示例。關於其他元素背後的div'渲染'，設置'z-index：9990;' – akalucas

這裏有一個基本的對話框插件：

http://jsfiddle.net/pjUUQ/

(function($) { 
    var dialogHTML = '<div class="dialog"></div>'; 

    $.openDialog = function(opts) { 
     // Create the DIV for dialog without inserting into DO 
     var dialog = $(dialogHTML); 
     dialog.appendTo('body'); 

     // Give dialog some basic CSS 
     dialog.css({ 
      position: 'absolute', // positioned 
      'z-index': Math.pow(2,32) // make it sit on top 
     }); 

     // Position the dialog on the screen 
     var horizOffset = ($(window).width() - opts.width || dialog.outerWidht())/2; 
     var vertOffset = ($(window).height() - opts.height || dialog.outerHeight())/2; 
     dialog.css({ 
      left: horizOffset, 
      right: horizOffset, 
      top: vertOffset, 
      bottom: vertOffset 
     }); 

     // Return dialog object to make it chainable 
     return dialog;    
    };   

}(jQuery)); 

$.openDialog({width: 200, height: 100}).append('hello world');

你可以有很多肯定會增加它，就像處理按鍵事件的結束對Esc鍵，添加一個標題欄和按鈕。但是你可能已經知道如何做這些事情了。

幾件事情要創建對話框時注意：

設置足夠高的z索引，使對話框始終在最前面
追加對話框元素來BODY

在我經驗，如果對話框HTML並不總是出現在頁面上，則性能會更好。這不利於優雅的降級，但DOM樹越輕，應用程序似乎越快。所以最好根據需要將對話元素添加到樹中。

編輯：請注意，我的對話框插件並不希望你在頁面上有一個預定義的HTML。它只是讓人想起一個div。所以，你不要選擇一個元素，並將其轉換爲對話框。相反，你重新創建一個。

來源

2012-06-15 09:18:23 hayavuk

用JQuery做彈出窗口/對話框的最佳方法？

回答

相關問題