Dev Stack Source

Answer : You need the modal in your HTML. When the delete button is clicked it popup the modal. It's also important to prevent the click of that button from submitting the form. When the confirmation is clicked the form will submit. $('button[name="remove_levels"]').on('click', function(e) { var $form = $(this).closest('form'); e.preventDefault(); $('#confirm').modal({ backdrop: 'static', keyboard: false }) .on('click', '#delete', function(e) { $form.trigger('submit'); }); $("#cancel").on('click',function(e){ e.preventDefault(); $('#confirm').modal.model('hide'); }); }); <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"...

Answer : I found a workaround for this issue. Once the modal has been hidden bootstrap data still remains on it. To prevent that I had the following: $('#myModal').modal('show'); //display something //... // if you don't want to lose the reference to previous backdrop $('#myModal').modal('hide'); $('#myModal').data('bs.modal',null); // this clears the BS modal data //... // now works as you would expect $('#myModal').modal({backdrop:'static', keyboard:false}); I had the same problem with Bootstrap 4.1.1 and it only worked when I added the data attributes to the html <div class="modal fade show" id="myModal" tabindex="-1" role="dialog" style="display: block;" data-keyboard="false" data-backdrop="static"> ... Similar to Daniele Piccioni but a bit more concise: $('#myModal').modal({backdrop: true, keyboard: false, show: t...

Answer : so create a reusable service for that... read here code here: angular.module('yourModuleName').service('modalService', ['$modal', // NB: For Angular-bootstrap 0.14.0 or later, use $uibModal above instead of $modal function ($modal) { var modalDefaults = { backdrop: true, keyboard: true, modalFade: true, templateUrl: '/app/partials/modal.html' }; var modalOptions = { closeButtonText: 'Close', actionButtonText: 'OK', headerText: 'Proceed?', bodyText: 'Perform this action?' }; this.showModal = function (customModalDefaults, customModalOptions) { if (!customModalDefaults) customModalDefaults = {}; customModalDefaults.backdrop = 'static'; return this.show(customModalDefaults, customModalOptions); }; this.show = function (customModalDefaults, customModalOptions) { //Create temp objects t...