Kar*_*ala 5 jquery jquery-ui-dialog uploadify asp.net-mvc-3
我在我的MVC3应用程序中使用uploadify fileupload控件.
我正在尝试将文件上载浏览按钮放在jQuery对话框中.
当我使用jQuery对话框呈现fileupload的内容时,它在firefox中运行良好,但它在Chrome中不起作用.
我可以Browse在jQuery对话框中看到按钮,但无法单击.
我注意到如果modal:true设置为对话框,它就不起作用了.如果我注释掉模态它工作正常.
但是我可以看到这篇文章,但我无法帮助我.还有同样的问题
这是我的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();