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

发布于 2024-12-19 20:32:45 字数 1319 浏览 1 评论 0原文

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

云醉月微眠 2024-12-26 20:32:45

问题解决了。它与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); 
   }

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

回复收藏 0 原文

~没有更多了~