Afficher la barre de progression dans la boîte de dialogue modale à l'aide de Twitter Bootstrap
Comment afficher une barre de progression à l'intérieur d'une fenêtre modale à l'aide de twitter bootstrap?
L'écran gris, mais la boîte de dialogue modale est pas à l'affiche.
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();
});
OriginalL'auteur Jonathan Kittell | 2015-04-14
Vous devez vous connecter pour publier un commentaire.
Utiliser cette balise à la place:
Voir cette mise à jour du violon
OriginalL'auteur Ted
À l'aide de mon extension sur bootstrap-waitingfor de la bibliothèque , cette extension comprend:
Pour plus de documentation , de vérifier ce lien
Pour les meilleures pratiques de vérifier cette VIOLON :
si vous voulez LTR :
U r welcome @GangSu
merci. Même si j'ai trouvé un problème mineur - j'ai utilisé cette lib pour montrer les progrès d'un appel AJAX. Chaque fois que j'ai eu une mise à jour en cours-je mettre à jour la barre de progression. Toutefois, le pourcentage de la barre n'était pas affiché correctement (la valeur pourrait être de 80%, mais la largeur de la barre de 20% seulement). La désactivation de transition css animation résout le problème. Il semble que, si le progrès() a été appelé alors que le bar était encore l'animation de perturber le calcul de corriger la largeur de la barre.
Gang Su - toute chance que vous pourriez partager votre code? Vous ne savez pas comment désactiver les css animation de transition. Merci.
OriginalL'auteur Abdennour TOUMI