Twitterブートストラップを使用して、モーダルウィンドウ内にプログレスバーをどのように表示しますか？画面はグレー表示されますが、モーダルダイアログは表示されません。
JSFiddle
http://jsfiddle.net/jkittell/L0ccmgf2/4/
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
$(function () {
var pleaseWait = $('#pleaseWaitDialog');
showPleaseWait = function () {
pleaseWait.modal('show');
};
hidePleaseWait = function () {
pleaseWait.modal('hide');
};
showPleaseWait();
});
代わりにこのマークアップを使用してください：
<!-- 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>
この更新されたフィドルを参照してください
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加