带有嵌套表单的 jQuery 对话框

发布于 2024-11-02 22:51:06 字数 1055 浏览 1 评论 0原文

我有一个 jQuery 对话框,其中有一个嵌套表单。该表单包含一个输入框和一个提交按钮。当对话框弹出时,我希望用户只能填写它,而页面上没有其他内容。我的 css 在这里完成:

.ui-widget-overlay 
{
    height: 1339px !important;
    width: 595px !important;
}

这允许用户不在页面上执行任何其他操作,但问题是输入字段也被禁用。

有什么建议吗?

编辑:这是我制作对话框的方法

function dialog(left, top) {

    //Creates a new dialog
    $('#dialog').dialog({
        position: [left, top],
        height: 90,
        width: 200,
        resizable: false,
        modal: true,
        title: '<span class="ui-icon ui-icon-home"></span> Enter Info',
    });
}

这是我用于对话框的表单:

<!-- Store Location Dialog -->
<div id = "dialog">
    <form id = "info" method = "post" action = "Default.aspx" \> 
        <input type = "text" id = "changeDialogText" name = "changeLocation" /> <!-- THIS IS DISABLED -->
        <input type = "button" id = "changeDialogSubmit" value = ""  onclick = "function()"/> 
    </form>
</div>

I have a jQuery dialog with a nested form inside of it. The form contains an input box and a submit button. When the dialog pops up I want the user to only be able to fill it out, and nothing else on the page. My css for that is done here:

.ui-widget-overlay 
{
    height: 1339px !important;
    width: 595px !important;
}

This works in allowing the user not to do anything else on the page, but the problem is that the input field is also disabled.

Any suggestions?

Edit: Here is how I make the dialog

function dialog(left, top) {

    //Creates a new dialog
    $('#dialog').dialog({
        position: [left, top],
        height: 90,
        width: 200,
        resizable: false,
        modal: true,
        title: '<span class="ui-icon ui-icon-home"></span> Enter Info',
    });
}

Here is the form I use for the dialog:

<!-- Store Location Dialog -->
<div id = "dialog">
    <form id = "info" method = "post" action = "Default.aspx" \> 
        <input type = "text" id = "changeDialogText" name = "changeLocation" /> <!-- THIS IS DISABLED -->
        <input type = "button" id = "changeDialogSubmit" value = ""  onclick = "function()"/> 
    </form>
</div>

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

白日梦 2024-11-09 22:51:06

我想通了这个问题。我的表单的 z-index 低于页面的 z-index。这会导致对话框出现问题,因为不确定输入是在对话框中还是在页面上

I figured out the issue. I had the z-index of my form lower then the z-index of the page. This caused issues with the dialog because it was unsure if the input was in the dialog or on page

晨光如昨 2024-11-09 22:51:06

以上并没有提供正确的字面答案。 z-Index auto 不会削减它。

title: 'Quantity 1',
autoOpen: false,
show: 'slide',
hide: 'explode',
resizable: true,
stack: true,
height: "200",
width: "790",
zIndex: "auto",
modal: true

The above does not provide a literal answer that is correct. z-Index auto does not cut it.

title: 'Quantity 1',
autoOpen: false,
show: 'slide',
hide: 'explode',
resizable: true,
stack: true,
height: "200",
width: "790",
zIndex: "auto",
modal: true
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文