当模态为真时，浏览按钮在JQuery对话框中不起作用

我在我的MVC3应用程序中使用uploadify fileupload控件。当模态为真时，浏览按钮在JQuery对话框中不起作用

我想把jQuery对话框中的fileupload浏览按钮。

当我使用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时无法获得弹出框

任何帮助，可以理解

来源

2012-12-18 Karthik Chintala

您将打开的对话框追加到HTML上，因为对话框将自身绑定到文档，所以它也设置了它自己的可见性，无需干预。 –

但对于我的div，我禁用页面加载时的可见性。您可以看到html，我刚刚编辑过 –

当然，您需要将其设置为显示：none或visibility：hidden，但不需要再次使其可见。对话框小部件将使其自己可见。 –

附加从评论：

Uploadify具有自动应用的1的z-index需要改变。

添加到您的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();

来源

2012-12-18 10:37:00

你用'modal：true'在浏览器中试过 –

是的，我一直使用这些模式，他们在IE7 +，Chrome和Firefox中工作 –

如果这仍然是一个问题，模式可能会显示在页面的其他元素下。尝试增加z-索引或计算出哪些元素具有较高的z-索引，以阻止模态高于所有其他元素。 –

当模态为真时，浏览按钮在JQuery对话框中不起作用

回答

相关问题