Question

我的上传系统需要帮助。我使用紫色按钮http://tympanus.net/Development/CreativeButtons/（当你看到紫色按钮时向下滚动）。

我使用那个宽大的短内容弹出窗口http://codepen.io/ksondere/pen/tAIrl（这里是JS代码和HTML和CSS源代码）。

<form id="fileupload" action="<?php echo site_url( $user->userURL.'/upload' ) ?>" method="POST" enctype="multipart/form-data">
    <div id="wrap">

    <div id="main">
<div id="droparea">
<div class="empty-folder-contents density-tiny">
<div class="empty-folder-circle"></div>
<div class="drop-file-icon drive-sprite-aux-image-gray"></div>
<div class="drop-target-contents-text drop-target-contents-inactive">
    <div class="fileinner">
        <img class="file" src="img/icon/file.png" />

        <p>
            <label for="upload" class="btn btn-5 btn-5b icon-plus">Lisa fail</label>
<input style="opacity:0" type="file" name="files[]" id="upload" multiple>
        </p>
        <div class="drop-target-contents-main-title">või</br></br>lohistage failid siia!</div>
    </div>
</div>
</div>
</div>
</div>
    </div>

        <div id="shortModal" class="modal modal-wide fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">Failide üleslaadimine</h4>
                    </div>
                <div class="progress progress-danger progress-striped active">
            <div class="bar" style="width:0%;"></div>
        </div>
            <div class="progress-extended">&nbsp;</div>
            </div>
<div class="fileupload-loading"></div>
    <br>
    <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
    </div>
    </div>
    </form>
</div>
<script style="display: none;">var __links = document.querySelectorAll('label');function __linkClick(e) { parent.window.postMessage(this.href, '*');} ;for (var i = 0, l = __links.length; i < l; i++) {if ( __links[i].getAttribute('target') == '_blank' ) { __links[i].addEventListener('click', __linkClick, false);}}</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>
// when .modal-wide opened, set content-body height based on browser height; 200 is appx height of modal padding, modal title and button bar

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});
</script>
<?php endif; ?>

我需要点击那个紫色按钮，然后自动弹出，上传进度条和文件名。

亲切的问候， KLDesigns，

Answer 1

不确定，这是您使用bootstrap＆gt;＆gt;后的代码http://jsfiddle.net/Y5x4d/

<!-- Button trigger modal -->
<button class="btn btn-5 btn-5a icon-cog" data-toggle="modal" data-target="#myModal"><span>lauch Modal</span></button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">

        <div class="progress progress-striped">
          <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
            <span class="sr-only">40% Complete (success)</span>
          </div>
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 2

它在你的jsfiddle工作.. 但是当我按下然后选择其打开的弹出窗口时，我需要选择第一个文件。

文件上传弹出窗口

2 个答案: