CSS修改上传按钮不工作在jQuery UI对话框

我在jQuery UI对话框中放置了一个修改后的CSS文件上传字段。除了当我点击上传字段时，一切都可以正常工作，选择文件的对话框不会打开。我怎样才能解决这个问题？CSS修改上传按钮不工作在jQuery UI对话框

这里是我的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/当放置在对话框外时正在工作

来源

2013-01-20 sonam

设置文件上传的z索引高于对话窗口的z索引。

#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-20 08:44:48

CSS修改上传按钮不工作在jQuery UI对话框

回答

相关问题