Question

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

我正在尝试将fileupload浏览按钮放在jQuery对话框中。

当我使用jQuery对话框呈现fileupload的内容时，它在firefox中运行正常，但它在Chrome中不起作用。

我可以在jQuery对话框中看到Browse按钮，但无法点击。

我注意到如果将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时我无法获得弹出窗口

可以提供任何帮助

Answer 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();

当modal为true时，Browse按钮在JQuery对话框中不起作用

1 个答案: