0

変更したCSSファイルアップロードフィールドをjQueryUIダイアログボックス内に配置しました。アップロードフィールドをクリックした場合を除いて、すべてが機能します。ファイルを選択するためのダイアログボックスが開きません。どうすればこれを修正できますか？

これがjsfiddleです。

これが私の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");
    }
  );
});

私のCSSスタイル：

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('http://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;
}

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>

アップロードフォームをダイアログボックスの外に配置してテストしましたが、機能します。jQuery UIダイアログボックス内に配置されている場合にのみ、機能しません。これがjsfiddleリンクhttp://jsfiddle.net/Tdkre/1/で、ダイアログの外に配置すると機能します

4

1 に答える 1

0

ファイルアップロードのz-indexをダイアログウィンドウのz-indexよりも高く設定します。

#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
}

作業デモ： http： //jsfiddle.net/JXHPc/1/

于 2013-01-20T08:44:48.730 に答える