Home/ Questions/Q 9019115
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T04:41:57+00:00

I’m using uploadify fileupload control in my MVC3 application. I’m trying to put the

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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();
    • 0