jQuery UI对话框模式设置为true不适用于单选按钮

时间:2011-12-06 07:43:13

标签: jquery-ui dialog modal-dialog jquery-ui-dialog

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

答案 0 :(得分:4)

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

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