example - El modo modal del diálogo jQuery UI establecido en verdadero no funciona para los botones de radio
jquery popup window (1)
Cuando el diálogo se establece en modal, debe deshabilitar todos los elementos de entrada, pero probé un ejemplo simple con un cuadro de texto y un botón de radio. Cuando se abre el cuadro de diálogo, la entrada de texto se desactiva como se esperaba, pero aún puedo verificar el botón de radio. Usé el ejemplo de la demostración de jQuery-ui y un html simple con solo un cuadro de texto de entrada y la 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>
Y el jQuery:
function showDialog(){
jQuery(function() {
jQuery( "#dialog-message" ).dialog({
position: ''center'',
zIndex: 4001,
draggable: false,
modal: true,
buttons: {
Ok: function() {
jQuery( this ).dialog( "close" );
}
}
});
});
}
Problema resuelto. Tenía que ver con el CSS. Como no utilicé el css o css predeterminado creado con el rodillo de temas, olvidé definir el estilo para ui-widget-overlay. Después de copiar el estilo de ovelay del css de jquery-ui, todo funcionó bien.
el 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);
}