如何在瀏覽器調整大小後對齊JQuery對話框

我在做什麼： 當我的瀏覽器最大化並打開JQuery對話框時，它會按預期在中心打開它。但是，當我調整瀏覽器的大小略小於對話框的寬度，然後打開對話框時，它總是打開左對齊。右側有一大塊空間。如何在瀏覽器調整大小後對齊JQuery對話框

代碼

$(document).ready(function() { 
    var dlg = ''; 

    dlg=$('#ticketDetails').dialog({ 
     title: 'TICKET DETAILS', 
     resizable: true, 
     autoOpen:false, 
     modal: true, 
     show:'fast', 
     hide: 'fade', 
     buttons:{ "Close": function() { dlg.dialog("close"); } }, 
     close: function(e, i) { dlg.hide(); }, 
     width:1250 

    });

我已經試過什麼：

$(window).resize(function() { 
    $('#ticketDetails').dialog({position: ['center', 'center']}); 
});

我讀過一些問題的答案，並嘗試了一些變化，但似乎沒有任何工作..

更多信息：

http://jsfiddle.net/39GqM/479/

如果您滾動中間一路欄左邊，然後運行它，你會發現，查看右邊，你需要將其拖動到在左側的對話框內容標題欄，然後纔會出現滾動條。

以下屏幕顯示瀏覽器全屏顯示時的情況。正如你所看到的內容完全吻合： enter image description here

現在這一頁已經被調整，然後我打開的對話框。你可以看到它的左對齊。沒有滾動條，滾動條的唯一獲取方式是拖動對話框左側（通過標題上出現的光標），使滾動條出現。這是查看右側內容（段落/標題的開頭）的唯一方式。 enter image description here

來源

2013-02-19 greenpool

什麼是理想的行爲？如何顯示對窗口來說太寬的對話框？你是否希望它被中心化，同時切斷了_both_邊？ – tcovo 2013-03-18 00:21:49

我強烈建議使用CSS媒體查詢來實現這一點，如果你支持IE8和更低的使用填充工具作爲後備。

這是我上的jsfiddle解決方案：

http://jsfiddle.net/39GqM/505/

.ui-dialog { 
     min-width: 80%; 
     width: 80% !important; 
    } 
    @media only screen and (min-width: 1200px) { 
    .ui-dialog { 
     width: 1000px !important; 
    } 
    } 

    @media only screen and (max-width: 1000px) { 
    .ui-dialog { 
     min-width: 80%; 
     width: 80% !important; 
    } 
    }

所以，你將瞄準的.ui-對話框類，因爲jQuery的UI添加到DOM一串標記和我把重要的規則強制覆蓋。調用小部件時不要添加對話框寬度，讓CSS處理它。

$("#dialog").dialog(); 

$(window).resize(function() { 
    $("#dialog").dialog("option", "position", "center"); 
});

舊版本瀏覽器的回退檢查GitHub上這個回購和做媒體查詢窗口搜索： https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

實現填充工具通常是非常簡單的，但應該是在我看來，一個不同的問題。希望能幫助到你。

乾杯

來源

2013-03-18 19:12:41 forthehackofit

謝謝。這可能實際上工作。我對媒體查詢不是很瞭解。無論窗口大小有多小，有沒有辦法設置對話框的最小寬度？ – greenpool 2013-03-19 05:34:02

@greenpool實際上這是第一條規則的作用，它默認將寬度設置爲80％，媒體查詢中的代碼僅在條件匹配時才運行。所以如果你想要有一個固定的寬度，你可以將你在CSS中看到的80％的值更改爲新的寬度，或者更好的可以添加最小寬度：[x] px;在第一個街區，這將照顧它。讓我知道如果你想把它添加到小提琴。乾杯 – forthehackofit 2013-03-19 07:13:42

乾杯。我相信我現在已經按照我想要的方式開始工作了。感謝您的詳細解答！ – greenpool 2013-03-19 08:10:35

你試過：

$(window).resize(function() { 
    $("#ticketDetails").dialog("option", "position", "center"); 
});

來源

2013-02-19 09:59:15

編輯

的解決方案是將jQuery升級到1.8.6以上版本+ jQuery UI到1.9.2版本。顯然它是一個錯誤，並在更新的版本中得到修復。

同樣的例子與升級的jQuery：http://jsfiddle.net/39GqM/490/

你應該試試這個

$(window).resize(function() { 
    $("#dialog").dialog("option", "position", "center"); 
});

-> example <--

來源

2013-02-19 09:59:38

謝謝你，但嘗試將'width'設置爲1000，在整個窗口上運行它，然後將窗口最小化爲小於對話框的寬度，然後您就會明白我的意思了。您可以提供您正在處理的頁面嗎？ – greenpool 2013-02-19 11:31:10

？ – 2013-02-19 11:39:41

我在開發機器上運行它，所以無法共享，但請參閱編輯。 – greenpool 2013-02-19 23:37:59

我做這在對話框選項裏面的create語句中。它在屏幕中間保存我的對話框。

create : function() { 
      $(window).resize(function() { 
       $("#myDialog").parent().position({ 
            my : "center", 
            at : "center", 
            of : window 
            }); 
      }); 
      $(window).scroll(function() { 
       $("#myDialog").parent().position({ 
            my : "center", 
            at : "center", 
            of : window 
            }); 
      }); 
},

在對話結束時，我鏈接了定位功能。

$("#myDialog").dialog({ 

// do stuff 
// also add the positioning with "create" 

}).parent().position({ 
    my : "center center", 
    at : "center center+20", 
    of : window 
});

小提琴：http://jsfiddle.net/djwave28/yf8fR/4/

來源

2013-03-18 02:19:39 Daniel

在jQuery UI中運行良好 - v1.12.1 – 2016-12-05 06:13:07

問題是由jQueryUI的嘗試position與對話yourfixed當它不具有足夠的可用房間造成的 - 在collision logic。 .dialog()的默認值爲collision is = fit。

「fit」：將元素從窗口邊緣移開。

我試圖與其他碰撞選項：翻轉，flipfit，沒有但由於width="1000px" jQueryUI的找不到對話的好位置。

通過爲對話框提供動態寬度並綁定事件，對話框始終爲文檔寬度的80％，並始終重新定位到中心。 See demo

CSS

.width-80 { 
    width:80% !important; 
}

的JavaScript

var $dialog = $('#dialog'); 
$dialog.dialog({ dialogClass: 'width-80' }); 

$(window).resize(function() { 
    $dialog.dialog('option', 'position', 'center'); 
});

HTML

<div id="dialog" title="Basic dialog"> 
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div>

來源

2013-03-19 09:30:57 andyb

如何在瀏覽器調整大小後對齊JQuery對話框

回答

相關問題