jQuery UI对话框模态设置为true不适用于单选按钮 [英] jQuery UI dialog modal set to true doesn't work for radiobuttons
问题描述
当对话框设置为模式时,应禁用所有输入元素,但是我尝试了一个简单的示例,其中包含一个文本框和一个单选按钮。当对话框打开时,文本输入按预期禁用,但我仍然可以检查单选按钮。
我使用jQuery-ui演示的例子和一个简单的html,只需一个输入文本框和收音机。
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.
<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" );
}
}
});
});
}
推荐答案
问题解决。它与css有关。因为我没有使用主题滚轮创建的默认css或css,我忘记定义ui-widget-overlay的样式。在我从jquery-ui css中复制ovelay样式之后,一切正常。
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:
.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不适用于单选按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!