Jquery 模态对话框禁用表单元素

标签 jquery modal-dialog

当我将 jQuery 对话框设置为 model=true 时,它​​会禁用对话框内的表单元素,并且我无法使用它们,只能使用按钮。 我见过一些示例,其中对话框的内容在对话框启动脚本中声明,然后注入(inject)。但这对我来说太庞大了,我希望能够在 DIV 中创建我的标记,并将其转换为对话框。

有人能给我解决办法吗?

我的代码:


<form id="form1" runat="server">
<div class="dlg" id="msgDlg">    
    Name: <input type="text"  />
    <br />
    <input type="button" class="button" value="OK" onclick="$('#msgDlg').dialog('close');" />       
</div>
    <script>
        function InitMessageDialog(dialogId) {
            $(function () {
                jQuery("#" + dialogId).dialog({
                    autoOpen: false,
                    modal: false,
                    width: 450,
                    height: 300,
                    draggable: true,
                    resizable: true,
                    zIndex: 99999,
                    overlay: { backgroundColor: "#000", opacity: 0.5 },
                    open: function (type, data) {
                        $(this).parent().appendTo('#form');
                    }
                });
            })
        }
        function GoDialog() {
            var msgDlg = $('#msgDlg').dialog('open');
        }
        InitMessageDialog('msgDlg');
    </script>
    <input type="button" class="button" value="go dialog" onclick="GoDialog()" />
</form>

最佳答案

表单的 z-index 很可能是问题所在。尝试将其设置为“自动”:

#my_dialog_form {
    z-index: auto;
}

关于Jquery 模态对话框禁用表单元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2819213/

相关文章:

html - 让div在模态上具有相同的高度

javascript - 如何使用 jQuery 更改仪表大小?

javascript - 获取容器元素内具有 Id 的所有元素的性能明智且最快的方法

jquery - MVC 中的 Bootstrap 模式,双背景 - 背景出现两次

html - 出现弹出窗口模态,但无法正常工作。它不活跃

javascript - 将值传递给 Bootstrap Modal JavaScript 和 PHP

jquery - Firefox:当未找到图像时,它会破坏 html 层

javascript - 创建 AJAX 调用以显示任何简单的键/值 JSON

javascript - 在 Firefox 中加载大型 HTML 表的动画

javascript - 在按钮单击事件上关闭模式对话框