Menu
I'm using uploadify fileupload control in my MVC3 application.
I'm trying to put the fileupload browse button in jQuery dialog box.
When i used the jQuery dialog box to render the content of fileupload, it worked fine in firefox but it doesnot work in Chrome.
I could see the Browse button in jQuery dialog box, but unable to click.
I've noticed that if modal:true is set to Dialog box, it is not working. If i comment out the modal it works fine.
However i could see this post, but i couldnt help me. Still having the same issue
Here is my 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>
Here is my javascript:
$(function(){
$("#btnImg").click(function () {
$("#fileupload").dialog({
width: '511',
height: '200',
modal:true,
//show: "blind",
position: [300, 500]
});
});
});
If i use
$('#fileupload').dialog({ modal: true, autoOpen: false });
prior to the above code, i'm unable to get the popup when btnImg is clicked
Any help could be appreciated
621
Additional from comments:
Uploadify has a z-index of 1 applied automatically that needs changing.
Add this to your CSS to fix the problem:
.swfupload { z-index: 100000 !important; }
Original answer:
Just tested this out in Chrome and the problem as far as my tests have gone is the HTML structure you're using.
jQuery-UI Dialog will take an element from anywhere in the DOM and display it as a dialog, it doesn't need to be nested within the input elements button.
<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>
Notice that the modal window html is outside the container and hidden. This guarantees you that the stacking order of parent elements has no effect on the dialog 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,
...
});
});
As an extra, you don't even need DOM elements to create dialogs. You can build the dialog in jQuery or javascript and then call dialog on it.
// 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();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
