5

我在我的 MVC3 应用程序中使用 uploadify fileupload 控件。

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

当我使用 jQuery 对话框来呈现文件上传的内容时，它在 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 时我无法获得弹出窗口

任何帮助都将不胜感激

4

1 回答 1

1

来自评论的补充：

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

将此添加到您的 CSS 以解决问题：

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

原答案：

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

jQuery-UI Dialog 将从 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();
于 2012-12-18T10:37:00.073 回答