javascript - 进度条不出现 bootstrap

Question

我正在关注 this显示进度条的教程。

test.js

var waitBar;
waitBar = waitBar || (function () {
    var pleaseWaitDiv = $('<div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false"><div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div></div>');
    return {
        showPleaseWait: function () {
            pleaseWaitDiv.modal();
        },
        hidePleaseWait: function () {
            pleaseWaitDiv.modal('hide');
        },
    };
})();

page.html

@{
    Layout = null;
}

<button type="submit" class="button btn-primary radius pull-right" onclick="waitBar.showPleaseWait()">Submit</button>

<script src="~/Scripts/test.js" type="text/javascript"></script>

当我单击提交按钮时，页面变暗但不显示进度条模式。有人有什么想法吗？？

Answer 1

我会将模态对话框的 html 移动到 html 文档中，而不是在 JavaScript 中定义它。我重新实现了模态对话框，因为本教程的某些 html 感觉可疑。

function show() {
  $('#pleaseWaitDialog').modal();
  
  // just for the example hide the modal after 5 seconds
  window.setTimeout(close, 5000);
}

function close() {
  $('#pleaseWaitDialog').modal('hide');
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<button id="btn" class="btn btn-primary" onclick="show();">Submit</button>

<div id="pleaseWaitDialog" class="modal" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Processing...</h1>
      </div>
      <div class="modal-body">
        <div class="progress progress-striped active">
          <div class="progress-bar" style="width: 100%;"></div>
        </div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->