Confirmer la suppression en utilisant Bootstrap 3 modal box
J'ai besoin de confirmer la suppression en utilisant Bootstrap 3 modal box (OUI/NON). Comment puis-je créer ce?
Code HTML:
<form action="blah" method="POST">
<button class='btn' type="submit" name="remove_levels" value="delete">
<span class="fa fa-times"></span> Delete
</button>
</form>
Vous devez vous connecter pour publier un commentaire.
Vous avez besoin de la modale dans votre code HTML. Lorsque le bouton supprimer est sélectionné, popup modale. Il est également important d'éviter que le clic du bouton de soumission du formulaire. Lorsque la confirmation est cliqué, le formulaire se soumettre.
JS:
HTML:
e.prevenDefault()
Cancel
bouton. Puis le.one('click', '#delete', function(e) {})
appel pas de temps. Si je clique d'abord 3 fois le bouton annuler, puis cliquez surDelete
bouton de mon.one({})
exécute 4 fois. Veuillez vérifier.Vous pouvez utiliser
Bootbox
boîtes de dialoguePlunker Démo
J'ai le même problème aujourd'hui. C'est ma solution (qui je pense est le meilleur et le plus simple):
Et dans mon .js:
À l'aide de
unbind
avant laone
empêche que la suppression de la fonction est appelée lors de la prochaine ouverture de la boîte de dialogue.J'espère que cela pourrait être utile.
Suivre un exemple complet:
JS:
HTML:
façon simple d'utiliser des modaux est avec eModal!
Ex de github:
<script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>
JS:
HTML:
Astuce: Vous pouvez utiliser la commande modifier la valeur par défaut le nom de l'étiquette! { label: 'Oui' | 'True'| 'OK' }
VIOLON
Pour votre bouton:
Créer boîte de dialogue modale en HTML avec id="confirmation" et utiliser la fonction showConfirmation.
Rappelez-vous aussi que vous devez à unbind (modal.unbind()) d'annuler et de la réussite des boutons après masquer la boîte de dialogue modale. Si vous ne faites pas cela, vous obtenez le double de la liaison.
Par exemple: si vous ouvrez la boîte de dialogue une fois et appuyez sur "Annuler", puis ouvrir la boîte de dialogue seconde fois et appuyez sur 'Ok', vous obtiendrez 2 exécutions de succès de rappel.
https://jsfiddle.net/yiiBoy/hne9sp6g/
Suivantes solution est meilleure que bootbox.js, parce que
digimango.messagebox.js:
JS:
À utiliser digimango.messagebox.js:
HTML:
https://getbootstrap.com/docs/4.0/components/modal/