Question

I placed a modified CSS file upload field inside a jQuery UI dialog box. Everything works except when I click on the upload field, the dialog box to choose a file does not open. How can I fix this?

Here is the jsfiddle.

Here is my javascript:

$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    width: 400,
    modal: true,
    buttons: [{
      text: "Submit",
      click: function() {
        $( this ).dialog( "close" );
      }
    },
    {
      text: "Cancel",
      click: function() {
        $(this).dialog("close");
      }
    }]
  });
  // Link to open the dialog
  $("#dialog-link").click(function(event) {
    $("#dialog").dialog("open");
    event.preventDefault();
  });
  // Hover states on the static widgets
  $("#dialog-link, #icons li").hover(
    function() {
      $(this).addClass("ui-state-hover");
    },
    function() {
      $(this).removeClass("ui-state-hover");
    }
  );
});

My CSS styles:

body{
  margin: 0;
  padding: 0;
  color: #666;
  font-family: Tahoma, Geneva, sans-serif;
  font-size:13px;
  line-height: 1.4em;
  background-color: #f7f7f7;
  background-repeat: repeat-x;
  background-position: top;
}
.demoHeaders {
  margin-top: 2em;
}
#dialog-link {
  padding: .4em 1em .4em 20px;
  text-decoration: none;
  position: relative;
}
#dialog-link span.ui-icon {
  margin: 0 5px 0 0;
  position: absolute;
  left: .2em;
  top: 50%;
  margin-top: -8px;
}
#icons {
  margin: 0;
  padding: 0;
}
#icons li {
  margin: 2px;
  position: relative;
  padding: 4px 0;
  cursor: pointer;
  float: left;
  list-style: none;
}
#icons span.ui-icon {
  float: left;
  margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
  position: absolute;
}
#FileUpload {
  position:relative;
}
#BrowserVisible {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  background:url('https://i.stack.imgur.com/PaT3a.png') 100% 1px no-repeat;
  width:345px;
  height:30px;
}
#FileField {
  width:250px;
  margin-right:85px;
  padding: 6px;
  font-size: 13px;
  background: #fff url('bg-form-field.gif') top left repeat-x;
  border: 1px solid #d5d5d5;
  color: #333;
  border-radius: 4px 4px 4px 4px !important;
}
#BrowserHidden {
  position:relative;
  width:345px;
  height:30px;
  text-align: right;
  -moz-opacity:0;
  filter:alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
}

Here is the HTML:

<p><a href="#" id="dialog-link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
<div id="dialog" title="Update Profile Picture" style="font-size: 12px;">
  <div id="FileUpload">
    <input type="file" size="24" id="BrowserHidden" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
    <div id="BrowserVisible"><input type="text" id="FileField" /></div>
  </div>
</div>

I tested the upload form by placing it outside the dialog box and it works. Only when it is placed inside the jQuery UI dialog box, is it not working.
Here is the jsfiddle link http://jsfiddle.net/Tdkre/1/ which is working when placed outside dialog

Answer 1

Set the z-index of the file upload higher than that of the dialog window.

#BrowserHidden {
    position:relative;
    width:345px;
    height:30px;
    text-align: right;
    -moz-opacity:0;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 1050; //z-index of dialog is 1002, causing it to appear above input
}

Working Demo: http://jsfiddle.net/JXHPc/1/