JQUERY UI Modal教程

任何人都可以提供一個乾淨的例子來說明如何使用JQUERY的UI模式對話框。令人驚訝的是，它並不像你想象的那麼簡單。JQUERY UI Modal教程

目標：

單擊元素加載模式
的模式出現，顯示「正在加載...」然後一個Ajax調用來獲取模式的內容
可通過單擊關閉btn或按轉義關閉模式
模式可以重新打開，當它重新打開時，它不會顯示之前模態交互的狀態。

謝謝！

這是我目前正在做的，但它的工作非常笨拙，似乎並不像一個聰明的解決方案。想法？

var $dialog = $('<div id="sharerdialog"></div>') 
.html('<p>Loading...</p>') 
.dialog({ 
    autoOpen: false, 
    title: 'Share the item', 
    position: ['center',150], 
    width: 450, 
    focus:function(event, ui) { 
     $('#dialogcloser').click(function() { 
      $dialog.dialog('close'); 
     }); 
    }, 
    open: function(event, ui) { 
     var title2use = document.title; 
     title2use = escape(title2use);   
     $("#sharerdialog").load("/items/ajax/share/index_beta.cfm?itemid=#itemID#&itemtitle=" + title2use); 
    } 
}); 
// Bind the Share btn to Open the Modal 
$('#itemshare').click(function() { 
    $dialog.dialog('open'); 
});

來源

2010-02-20 AnApprentice

有了快感。向我們展示您迄今爲止使用jsbin.com所進行的嘗試，我們可以填寫空白或糾正錯誤。 – redsquare 2010-02-20 19:06:55

@RedSquare，好主意......我用我現在的JS更新了這個問題。謝謝 – AnApprentice 2010-02-20 23:24:59

主要的問題我與你的代碼中看到的，是你沒有添加對話框的DOM，因此，瀏覽器將不顯示它。我的建議是你第一次嘗試：

var $dialog = $('<div id="sharedialog"></div>') 
     .html('<p>Loading....</p>') 
     .appendTo('body') 
     .dialog({...});

所以，你把它添加到DOM，瀏覽器可以顯示它。

來源

2010-02-21 08:31:51 guzart

有趣的是，上面的代碼工作得很好，它看起來很笨重。 – AnApprentice 2010-02-21 23:47:06

從用戶界面的角度來看，每次提出請求時都可能會看到模式。既然你提到用戶可以關閉它，我假設你只是想給用戶反饋，即正在加載響應。在這種情況下，爲什麼不直接顯示「加載...」文本（或圖標），靠近按鈕，還是作爲結果區域的頂層。使用css'visibility：hidden;'或'display：none;'並使用jQuery顯示/隱藏它。 – guzart 2010-02-22 00:04:33

有趣的想法。 – AnApprentice 2010-02-27 19:40:32

爲什麼這麼複雜？

$(function() { 
    $("#itemshare").click(function() { 
     $("#sharerdialog").dialog().load("/items/ajax/share/index_beta.cfm"); 
     return false; 
    }); 
    });

你可以在jQuery中鏈接它的uo。而在HTML中只有一個空的div與id sharerdialog。可以設置樣式隱藏

style="display: none;"

但是那它

來源

2012-12-30 17:13:35 the0bone

JQUERY UI Modal教程

回答

相關問題