jQuery UI对话框模式设置为true不适用于radiobuttons

When the dialog is set to modal it should disable all input elements, but I tried a simple example with a textbox and a radiobutton. When the dialog is opened the text-input is disabled as expected, but i still can check the radiobutton. I used the example from the jQuery-ui demo and a simple html with just a input-textbox and the radio.

当对话框设置为模态时，它应该禁用所有输入元素，但我尝试了一个带文本框和单选按钮的简单示例。打开对话框时，文本输入按预期禁用，但我仍然可以检查单选按钮。我使用了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>

And the jQuery:

和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 个解决方案

#1

Problem solved. It had to do with the css. Because I didn't use the default css or css created with theme roller I forgot to define the styling for ui-widget-overlay. After I copied the ovelay-styling from the jquery-ui css everything worked fine.

问题解决了。它与css有关。因为我没有使用使用主题滚轮创建的默认css或css，所以我忘了为ui-widget-overlay定义样式。我从jquery-ui css复制了ovelay-styling后，一切正常。

the 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); 
   }

#1

the 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); 
   }

秒客网

jQuery UI对话框模式设置为true不适用于radiobuttons

1 个解决方案

#1

#1

相关文章