在使用Twitter引导的模式对话框中显示进度条

时间：2021-07-30 10:05:52

How do you show a progress bar inside a modal window using twitter bootstrap? The screen greys out but the modal dialog is not showing.

如何使用twitter引导程序在模式窗口中显示进度条?屏幕变灰，但是模式对话框没有显示。

JSFiddle

JSFiddle

http://jsfiddle.net/jkittell/L0ccmgf2/4/

http://jsfiddle.net/jkittell/L0ccmgf2/4/

HTML

HTML

<body>
     <h1>Hello World!</h1>

    <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>
</body>

JavaScript

JavaScript

$(function () {
    var pleaseWait = $('#pleaseWaitDialog');

    showPleaseWait = function () {
        pleaseWait.modal('show');
    };

    hidePleaseWait = function () {
        pleaseWait.modal('hide');
    };

    showPleaseWait();
});

2 个解决方案

#1

8  

Use this markup instead:

使用这个标记:

<!-- Modal -->
<div class="modal fade" id="pleaseWaitDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
          <h1>Processing...</h1>
      </div>
      <div class="modal-body">
        <div class="progress">
          <div class="progress-bar progress-bar-success progress-bar-striped" 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>
  </div>
</div>

See this updated fiddle

看到这个更新的小提琴

#2

7  

Using my extension on bootstrap-waitingfor library , this extension includes:

使用我在bootstrap-waitingfor库上的扩展，这个扩展包括:

  • message function
  • 消息函数
  • animate function
  • 动画功能
  • stopAnimate function
  • stopAnimate函数
  • progress function
  • 进步函数

For more documentation , check this link

有关更多文档，请查看此链接

For best practices check this FIDDLE :

  waitingDialog.show('In progress ...');
  waitingDialog.progress(0);
 //----i.e: after 2 sec
 waitingDialog.progress(10); // means 10 %
 // i.e: after 2sec again 
 waitingDialog.progress(60); // means 60%

if you want LTR :

waitingDialog.show('Please wait',{rtl:false})

#1

8  

Use this markup instead:

使用这个标记:

<!-- Modal -->
<div class="modal fade" id="pleaseWaitDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
          <h1>Processing...</h1>
      </div>
      <div class="modal-body">
        <div class="progress">
          <div class="progress-bar progress-bar-success progress-bar-striped" 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>
  </div>
</div>

See this updated fiddle

看到这个更新的小提琴

#2

7  

Using my extension on bootstrap-waitingfor library , this extension includes:

使用我在bootstrap-waitingfor库上的扩展，这个扩展包括:

  • message function
  • 消息函数
  • animate function
  • 动画功能
  • stopAnimate function
  • stopAnimate函数
  • progress function
  • 进步函数

For more documentation , check this link

有关更多文档，请查看此链接

For best practices check this FIDDLE :

  waitingDialog.show('In progress ...');
  waitingDialog.progress(0);
 //----i.e: after 2 sec
 waitingDialog.progress(10); // means 10 %
 // i.e: after 2sec again 
 waitingDialog.progress(60); // means 60%

if you want LTR :

waitingDialog.show('Please wait',{rtl:false})
标签：

相关文章