Проблема с диалоговым окном jQuery UI, когда модальное значение установлено на TRUE - PullRequest
Новая
       15

Проблема с диалоговым окном jQuery UI, когда модальное значение установлено на TRUE

4 голосов
/ 28 февраля 2010

Я занимаюсь разработкой приложения ASP.NET WebForm с помощью Visual Studio 2008 SP1 и C #.

У меня есть следующая страница ASPX: 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#dialog").dialog({
                autoOpen: false,
                modal: true,
                buttons: {
                    'Ok': function() {
                        __doPostBack('TreeNew', '');
                        $(this).dialog('close');
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                },
                close: function() {
                },
                open: function(type, data) {
                    $(this).parent().appendTo("form");
                }
            });
        });
        function ShowDialog() {
            $('#dialog').dialog('open');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="TreeNew" runat="server" Text="Nuevo" 
            OnClientClick="ShowDialog();return false;" onclick="TreeNew_Click"/>
        <asp:Label ID="Message" runat="server"></asp:Label>
        <div id="dialog_target"></div>
        <div id="dialog" title="Select content type">
            <p id="validateTips">All form fields are required.</p>
            <asp:RadioButtonList ID="ContentTypeList" runat="server">
                <asp:ListItem Value="1">Text</asp:ListItem>
                <asp:ListItem Value="2">Image</asp:ListItem>
                <asp:ListItem Value="3">Audio</asp:ListItem>
                <asp:ListItem Value="4">Video</asp:ListItem>
        </asp:RadioButtonList>
        </div>
    </div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    </form>
</body>
</html>

Когда для параметра modal установлено значение true,количество звезд на странице будет расти (я знаю, что поскольку обе полосы прокрутки становятся меньше, вертикальная полоса быстрее, чем горизонтальная).

Просматривая исходный код страницы, я вижу, что следующий div находится вне тега forms: 

<div class="ui-widget-overlay" style="z-index: 1001; width: 1280px; height: 65089px;" jQuery1267345392312="20"/>

Если я установлю модальное значение false, ошибка не произойдет.Я думаю, проблема в том, что div, работающий как модальный, находится за пределами формы.

Что вы думаете?

Ответы [ 4 ]

2 голосов
/ 26 апреля 2011

Установите этот стиль, это решит проблему 

<style type="text/css"> 

.ui-widget-overlay   
{   
    background-color: #000000;   
    left: 0;   
    opacity: 0.5;   
    position: absolute;   
    top: 0;   
}   

.ui-dialog   
{   
    background-color: #FFFFFF;   
    border: 1px solid #505050;   
    position: absolute;   
    overflow: hidden;   
} 


</style>
1 голос
/ 08 ноября 2011

Нашел это, что исправил это для меня в IE 8 здесь :

"Изменение свойства CSS позиции для класса .ui-widget-overlay с абсолютного на фиксированное исправило проблему с полосой прокрутки для нас, но вызвало переполнение памяти и зависание в IE 6. Я нашел способ обойти это, следующее в файле CSS: 

.ui-widget-overlay { position: fixed; } 
.ui-widget-overlay { _position: absolute; }

Первая запись используется для исправления проблемы с полосой прокрутки в IE 8 и работает потрясающе. Вторая запись с «_» выбирается только в IE 6 и устанавливает абсолютную позицию, поскольку у нас никогда не было проблемы с полосой прокрутки в IE 6.

1 голос
/ 28 февраля 2010

Я думаю, что вы правы, оверлей должен скрыть остальную часть страницы, но, как вы видите, просто перейдите к той теме, которую вы используете, и вы можете взломать класс ui-widget-overlay, чтобы он не рос как много, должен сказать, это выглядит очень странно с высотой 65089 пикселей. Вы можете попытаться установить максимальную высоту на 100%.

0 голосов
/ 10 апреля 2010

Попробуйте сделать это в событии закрытия диалогового окна (перед диалоговым окном destroy()s наложение): 

div.data('dialog').overlay.$el.css({height: 0, width: 0});

Я думаю, что это как-то связано с тем, что оверлейный объект jQuery UI использует DIV вместо того, чтобы удалять его.

...