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

我在我的 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();