gpt4 book ai didi

jquery - 当模式为 true 时,浏览按钮在 JQuery 对话框中不起作用

转载 作者:行者123 更新时间:2023-11-30 23:44:37 25 4
gpt4 key购买 nike

我在我的 MVC3 应用程序中使用 uploadify 文件上传控件。

我正在尝试将文件上传浏览按钮放入 jQuery 对话框中。

当我使用 jQuery 对话框渲染 fileupload 的内容时,它在 Firefox 中工作正常,但在 Chrome 中不起作用。

我可以在 jQuery 对话框中看到浏览按钮,但无法单击。

我注意到,如果 modal:true 设置为对话框,则它不起作用。如果我注释掉模式,它就可以正常工作。

但是我可以看到this发帖,但我帮不了我。还是有同样的问题

这是我的 HTML:

<body>
<div id="fileupload" style="display:none">
<div style="clear: none;">
File to Upload:
<input type="file" name="file_upload" id="file_upload" style="padding-left: 50px;"/><hr />
</div>
<p style="text-align: right;">
<input type="submit" id="selectimage" value="Ok" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
<input type="submit" id="cancelimage" value="Cancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="cancelupload();" />
</p>
</div>
<input type="button" id="btnImg" />
</body>

这是我的 JavaScript:

$(function(){
$("#btnImg").click(function () {
$("#fileupload").dialog({
width: '511',
height: '200',
modal:true,
//show: "blind",
position: [300, 500]
});
});
});

如果我使用

$('#fileupload').dialog({ modal: true, autoOpen: false });

在上面的代码之前,我无法在单击 btnImg 时弹出窗口

如有任何帮助,我们将不胜感激

最佳答案

评论补充:

Uploadify 自动应用的 z-index 为 1,需要更改。

将其添加到您的 CSS 中以解决问题:

.swfupload { z-index: 100000 !important; }

原答案:

刚刚在 Chrome 中对此进行了测试,就我的测试而言,问题在于您正在使用的 HTML 结构。

jQuery-UI 对话框将从 DOM 中的任何位置获取元素并将其显示为对话框,它不需要嵌套在输入元素按钮内。

<body>

<div id="container">

<input type="button" name="dialogOpen" value="open dialog!" />

</div>

<!-- using jquery uis helper classes to hide content is a better way than
declaring inline styles -->

<div id="modalWindow" class="ui-helper-hidden" title="Modal window">

<h1>Example Modal Window</h1>
<p>...</p>

</div>

</body>

请注意,模式窗口 html 位于容器外部并隐藏。这可以保证父元素的堆叠顺序不会影响对话框 html。

$('#container').on('click', 'input[name="dialogOpen"]', function(event) {

// Using form buttons in some browsers will trigger a form submit
event.preventDefault();

$('#modalWindow').dialog({
width : 500,
height : 200,
...
});

});

此外,您甚至不需要 DOM 元素来创建对话框。您可以使用 jQuery 或 javascript 构建对话框,然后在其上调用对话框。

// Create the new element, populate with HTML and create dialog
$('<div />', {
'id' : 'modalWindow',
'title' : 'New modal window'
})
.html('<h1>New modal</h1><p>Modal text</p>')
.dialog();

关于jquery - 当模式为 true 时,浏览按钮在 JQuery 对话框中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13929988/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com