Question

我的页面上有一个JQuery对话框，显示滚动条。我尝试调整对话框的大小，但没有帮助。我也尝试调整显示对话框的div的大小但是也没有用。我也试过设置maxWidth和maxHeight，并调整溢出和.ui-widget-overlay - 没有区别。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.6.4.js"></script>
    <script src="Scripts/jquery-ui-1.11.4.js"></script>
    <script>
        $(document).ready(function () {
            $(".hlk1").click(function () {
                var linkId = $(this).attr("linkID");

                // initialize dialog
                var dlg = $("#dialog").dialog({
                    autoOpen: false,
                    modal: true,
                    draggable: false,
                    resizable: false,
                    position: { my: "center", at: "center", of: window },
                    height: 380,
                    width: 530,
                    maxHeight: 450,
                maxWidth: 600,
                open: function(){
                    $('body').css('overflow', 'hidden');
                    $('.ui-widget-overlay').css('width', '100%‌');
                    $('.ui-widget-overlay').css('height', '100%');
                },
                close: function () {
                    $('body').css('overflow', 'auto');
                    window.location.reload();
                }
            });

            // load content and open dialog
            dlg.load('page2.html?id=' + linkId).dialog('open');
        });
});
</script>
</head>

<body>

<a href="#" class="hlk1" linkid="305">Click here</a>
<br/>
<a href="#" class="hlk1" linkid="890">Click here</a>
<br/>
<div id="dialog"></div>
</body>
</html>

任何人都可以帮我摆脱滚动条吗？

JQuery对话框设置为模态但允许页面交互

0 个答案: