Javascript 使用 Twitter Bootstrap 在模式对话框中显示进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29635076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show progress bar in modal dialog using Twitter Bootstrap
提问by Jonathan Kittell
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 bootstrap 在模态窗口中显示进度条？屏幕变灰，但没有显示模态对话框。
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();
});
采纳答案by Ted
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>
看到这个更新的小提琴
回答by Abdennour TOUMI
Using my extension on bootstrap-waitingforlibrary , this extension includes:
在bootstrap-waitingforlibrary上使用我的扩展，这个扩展包括：
- message function
- animate function
- stopAnimate function
- progress function
- 消息功能
- 动画功能
- 停止动画功能
- 进度功能
For more documentation , check this link
有关更多文档，请查看此链接
For best practices check this FIDDLE:
有关最佳实践，请检查此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 :
如果你想要 LTR ：
waitingDialog.show('Please wait',{rtl:false})
