Диалоговое окно jQuery UI, установленное в значение true, не работает для радиокнопок - PullRequest
Новая
       40

Диалоговое окно jQuery UI, установленное в значение true, не работает для радиокнопок

0 голосов
/ 06 декабря 2011

Когда диалоговое окно настроено на модальное, оно должно отключить все элементы ввода, но я попробовал простой пример с текстовым полем и радиокнопкой. Когда диалоговое окно открыто, ввод текста отключен, как и ожидалось, но я все еще могу проверить переключатель. Я использовал пример из демоверсии jQuery-ui и простой HTML-код, содержащий только текстовое поле ввода и радио. 

<html>
    <head>
    <title>Test</title>
    </head>

    <body>
        <div id="dialog-message" title="Download complete" style="display:none">
            <p>
                <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
                Your files have downloaded successfully into the My Downloads folder.
            </p>
            <p>
                Currently using <b>36% of your storage space</b>.
            </p>
        </div>
        <input type="text"/>
        <input type="radio" onClick="showDialog();"/>
        <input type="radio"/>
    </body>
</html>

И JQuery: 

function showDialog(){
   jQuery(function() {
       jQuery( "#dialog-message" ).dialog({
            position: 'center',
            zIndex: 4001,
            draggable: false,
            modal: true,
            buttons: {
                Ok: function() {
                    jQuery( this ).dialog( "close" );
                }
            }
        });
    });
}

1 Ответ

4 голосов
/ 13 декабря 2011

Проблема решена.Это было связано с CSS.Поскольку я не использовал css или css по умолчанию, созданные с помощью ролика темы, я забыл определить стиль для ui-widget-overlay.После того, как я скопировал стиль ovelay из jquery-ui css, все заработало нормально.

css: 

   .ui-widget-overlay { 
         position: absolute; 
         top: 0; 
         left: 0; 
         width: 100%; 
         height: 100%; 
   }
   .ui-widget-overlay { 
         background: #666666 url(ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat; 
         opacity: .50;
         filter:Alpha(Opacity=50); 
   }
...