滾動條問題與Chrome和Safari

Question

我使用jQuery UI的對話與modal=true jQuery UI的對話框。在Chrome和Safari中，這將禁用通過滾動條和光標鍵進行滾動（使用鼠標滾輪滾動，頁面向上/向下滾動仍然有效）。

這是一個問題，如果對話框太高，以適應在一個頁面上 - 在筆記本電腦上的用戶感到沮喪。

有人提出這個三個月前了jQuery bug跟蹤系統 - http://dev.jqueryui.com/ticket/4671 - 它看起來並不像修正它是當務之急。 :)

因此，沒有人：

1. 對此有一個解決？
2. 有一個建議的解決方法，會給一個體面的可用性經驗？

我與鼠標懸停/ scrollto實驗的形式的位，但它不是一個很好的解決方案:(

編輯：道具羅文Beentje（誰不是在SO AFAICT）查找。解決這個jQuery UI的防止通過捕捉鼠標鬆開/鼠標按下事件滾動所以下面的代碼似乎解決它：在自己的風險

$("dialogId").dialog({ 
    open: function(event, ui) { 
     window.setTimeout(function() { 
      jQuery(document).unbind('mousedown.dialog-overlay') 
          .unbind('mouseup.dialog-overlay'); 
     }, 100); 
    }, 
    modal: true 
}); 

使用，我不知道還有什麼其他行爲非模態解除綁定這個東西可能允許。

Answer 1

我同意以前的海報，如果對話不適合你，重新考慮你的設計可能是件好事。不過，我可以提供一個建議。

你可以把對話框內容滾動div嗎？這樣，而不是整個頁面需要滾動，只需要div內的內容滾動。這種解決方法應該很容易實現。

Answer 2

我相信有太大的對話是違反你的'體面的可用性經驗'的要求。即使你不必因jQuery UI對話框錯誤而有一個解決方法，我也會擺脫這樣的大對話。反正我知道有可能是在您需要調整一些「極端」的情況下，所以...

這就是說，它肯定會幫助，如果你附加了一些截圖 - 你問一個問題，關於設計，但我們看不到它。但我知道你可能無法/不願意展示它的內容，所以沒關係。這些是我的盲人猜測;希望你找到它們有用：

• 嘗試一個不同的佈局爲您的對話框。如果你這樣做，對所有的對話框都做，而不只是你有問題的對象（用戶不喜歡學習許多不同的用戶界面）。
• 如果你不能找到一個不同的佈局，儘量拓寬你的對話框第一。如果您有多種選擇可供選擇，您可以通過將它們分成兩列來找到一個很好的解決方案。
• 知道你已經在使用jQuery UI，請嘗試使用標籤。如果您的選項太多，選項卡式面板通常是一個很好的解決方案 - 用戶可以使用該小部件。
• 您在對話框中提到了'物品'，但我們不知道物品是什麼。當你點擊它們時，是否有可能以「總結」的方式顯示它們，例如左側的小列表和右側的擴展視圖？例如，在左側列出項目標題，點擊它們即可在右側完整顯示。

不能看到設計，我想這就是我可以去。

Answer 3

雖然我同意黨內沒有進行比視口大的對話的人，但我認爲有些情況下可能需要滾動。對話框在1024 x 768以上的分辨率下可能看起來非常好，但看起來不那麼緊湊。或者說，例如，你永遠不想讓對話框顯示在你網站的標題上。就我而言，我的廣告偶爾會出現flash z-index問題，所以我從不希望對話框顯示在上面。最後，一般來說，將任何類型的常用控件（例如滾動）從用戶身上移走是不利的。這是與對話的大小分開的問題。

我想知道爲什麼那些mousedown和mouseup事件首先出現在那裏。

我試過alexis.kennedy提供的解決方案，它能夠在不破壞我在任何瀏覽器中看到的任何內容的情況下突破。

Answer 4

你試過我的擴展到對話框嗎？ http://plugins.jquery.com/project/jquery-framedialog

Answer 5

我通過手動禁用對話模式模式，並顯示覆蓋解決此情況：

function showPopup() 
{ 
    //... 

    // actionContainer - is a DIV for dialog 

    if ($.browser.safari == true) 
    { 
     // disable modal mode 
     $("#actionContainer").dialog('option', 'modal', false); 

     // show overlay div manually 
     var tempDiv = $("<div id='tempOverlayDiv'></div>"); 
     tempDiv.css("background-color", "#000"); 
     tempDiv.css("opacity", "0.2"); 
     tempDiv.css("position", "absolute"); 
     tempDiv.css("left", 0); 
     tempDiv.css("top", 0); 
     tempDiv.css("width", $(document).width()); 
     tempDiv.css("height", $(document).height()); 
     $("body").append(tempDiv); 
    } 

    // remove overlay div on dialog close 
    $("#actionContainer").bind('dialogclose', function(event, ui) { 
     $("#tempOverlayDiv").remove();  
    }); 

    //... 
} 

Answer 6

您可以使用此代碼：jquery.ui.dialog.patch.js

它解決了這個問題對我來說。希望這是您正在尋找的解決方案。

Answer 7

解決綁定事件有一個解決方法。這增加了在開放以下內容：對話框的事件：

$("#longdialog").dialog({ 
    modal:true, 
    open: function (event, ui) { window.setTimeout(function() { 
     jQuery(document).unbind('mousedown.dialog-overlay').unbind('mouseup.dialog-overlay'); }, 100); 
    } 
}); 

這工作......但是這是醜陋的

--from https://github.com/jquery/jquery-ui/pull/230#issuecomment-3630449

工作就像在我的案件魅力。

Answer 8

這是一直以來修正了一個錯誤： http://bugs.jqueryui.com/ticket/4671

Answer 9

使用下面的代碼。它會正常工作。

$("dialogId").dialog({ 
     open: function(event, ui) { 
      window.setTimeout(function() { 
      jQuery(document).unbind('mousedown.dialog-overlay') 
         .unbind('mouseup.dialog-overlay'); 
      }, 100); 
     }, 
     modal: true, 
     safariBrowser: (function($, undefined) { 
       if ($.ui && $.ui.dialog) { 
        $.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function(event) { return event + '.dialog-overlay'; }).join(' '); 
       } 
}(jQuery)) 
});