Question

我使用以下代码创建文件上传框。但div中的帮助文字有id＆＃39; uploadHelp＆＃39;不可见。如果我删除位置＆＃39;绝对＆＃39;从css，它开始显示，但文件上传框不可点击，因为它已被uploadHelp div覆盖。

<html>
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
  <style>

     .cf-container{
         overflow-y:auto;
         overflow-x:hidden;
         height:192px;
     }
     #file-input-container {
      width: 94%;
      height: 80px;
      border: 2px dashed rgb(202, 206, 223);
      background: transparent;
      border-radius: 4px;
      color: #444;
      font-weight: 400;
      font-size: 16px;
      margin: 15px;
      overflow-x: hidden;
    }
    #file-input {
          background: transparent;
          border: none;
          height: 100%;
          width: 100%;
          opacity: 0;
          margin: 0;
          cursor: pointer;
    }
    .cf-upload-help {
        position: absolute; 
        z-index: -1;
        text-align: center;
        padding-top: 15px;
        width: 90%;
        margin: 0 auto;
    }
  </style>
  <div>
        <!-- Modal -->
        <div class="modal fade" id="uploadModal" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true" 
                style="margin-top: 25px;" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-body" style="padding: 0px">
                <div style="text-align:center">
                    <div id="file-input-container">
                        <div class="cf-upload-help" id="uploadHelp">
                            <div>Click to choose a file</div>
                            <div>or</div>
                            <div style="font-size:12px">Drop the file here</div>
                        </div>
                        <input type="file" id="file-input" />
                    </div>                  
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div style="width: 100%; text-align: center;padding-top: 50px;">
              <button id="showUpload">Upload</button>
              </table>
          </div>
      </div>
  </div>   

  <script>
    $("#file-input").change(function() {
        var input = document.getElementById("file-input");
        if (input.value) {
            $("#uploadHelp").html("Uploading...");
        } 
    });

    $("#showUpload").click(function() {
        $("#uploadModal").modal("show");
    });

  </script> 
</html>

这是代码的剥离版本。在完整的代码中，我看到uploadHelp div中的文本，即使位置是绝对的＆＃39;。以下是完整版中的附加代码 -

$("#file-input").change(function() {
        var input = $("#file-input");
        if (input.value) {
           $("#uploadHelp").html("Uploaded");
        } 
    });

但是一旦我选择了一个文件，模态窗口就会变成空白，不显示任何内容。

JSFiddle - https://jsfiddle.net/w949yg76/

Answer 1

您的z-index: -1;会使其显示在模式下方。将其设置为0，它对我有用。

https://jsfiddle.net/w949yg76/1/

Answer 2

您始终可以为主容器提供背景。

#file-input-container { 
  background-image: url("insertimagelink");
}

我已经创建了一个插件来演示 - http://plnkr.co/v2iEkuyWioT6GbJIF0VC

文件输入后面的文字不可见

2 个答案: