jQuery UI dialog modal set to true doesn't work for 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.

<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:

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

回答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.

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

来源：https://stackoverflow.com/questions/8396693/jquery-ui-dialog-modal-set-to-true-doesnt-work-for-radiobuttons

标签

jquery-ui

dialog

modal-dialog

jquery-ui-dialog