This plugin replaces the default javascript confirm box by using bootstrap's 4 modal component. Demo available here.
Add the following code for the dependencies in your HEAD tag :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>then add the plugin :
<script src="jquery.confirmModal.min.js"></script>We need to make sure that the DOM is ready before we implement the plugin, in this example we use the click event method that jQuery provides.
<script type="text/javascript"> $(function(){ $('.confirmModal').click(function(e) { e.preventDefault(); $.confirmModal('Are you sure you want to do this?', function(el) { alert('OK was clicked!'); //do something... }); }); }); </script>The first argument is the message we want to display, the second argument (optional) provides custom options for a specific modal and the third one is the callback function with the current clicked element passed as an argument (in this case the element being <a href="" class="confirmModal">click</a>).
By default, the plugin is set with the following options :
- The default locale is english
- There is no header text above the message displayed =>
messageHeader: ' ' - The modal's width is automatically sized according to the message displayed =>
modalBoxWidth: 'auto' - The modal displays instantly without any fade animation =>
fadeAnimation: false - The modal displays on the top of the page =>
modalVerticalCenter: false - The background is dark when the modal is displayed (bootstrap 4 default modal background) =>
backgroundBlur: false - There is no auto-focus on the "OK" button =>
autoFocusOnConfirmBtn: false
but you can change all those options by two ways, the first one by setting a global default behavior and the second one by specifying a custom behavior for a specific modal (if set alongside global defaults, they will overwrite them), the global variable for the default options is the following : $defaultsConfirmModal, here is an example of the list of all the options you can change :
//$defaultsConfirmModal sets a global default behavior for all confirm modals $defaultsConfirmModal = { confirmButton: 'Confirm', //changes the confirm button locale cancelButton: 'Cancel', //changes the cancel button locale messageHeader: 'Call to action', //any text you want to display above the main message modalBoxWidth: '365px', //set a fixed width in px/rem/em modalVerticalCenter: true, //the modal will be vertically aligned fadeAnimation: true, //the modal will have a fade in and fade out animation backgroundBlur: true, //if set to true : the plugin assumes that the content of your website //is wrapped in a div with the class name "container" and applies a blur of 0.1rem, //if you don't use such a wrapper or the wrapper has another name, you can pass an array //with your own selectors that you wish to blur and also set your own blur weight in px/rem (optional) //like that : ['#header, #content, #footer', '3px'] autoFocusOnConfirmBtn: true //when the modal is displayed, there will be an auto-focus on the "OK"button //so the user can press enter instead of clicking on the button };An example speaks better for itself :
<script type="text/javascript"> $(function() { //Let's say we want by default all modals to have french locale, to not display //any header text, we want a fixed width of 500px, we want the fade animation //and we want the auto-focus on the "confirm" button $defaultsConfirmModal = { confirmButton: 'Confirmer', cancelButton: 'Annuler', modalBoxWidth: '500px', fadeAnimation: true, autoFocusOnConfirmBtn: true }; $('.anotherConfirmModal').click(function(e) { e.preventDefault(); //Now, we want to change the default behavior we set earlier but just for this specific modal, //we'll set a text header, we don't want the auto-focus on the button, we'll center the modal vertically and we want to blur //the background, as stated previously those new values will overwrite the default ones set with $defaultsConfirmModal variable var options = { messageHeader: 'Call to action', modalVerticalCenter: true, backgroundBlur: ['#header_wrap, #main_content_wrap, #footer_wrap'], autoFocusOnConfirmBtn: false }; $.confirmModal('Are you sure you want to do this?', options, function(el) { alert('Yay!! You confirmed!'); //do something... }); }); $('.yetAnotherConfirmModal').click(function(e) { e.preventDefault(); //Here we don't specify any custom options so the default values from $defaultsConfirmModal will apply, //if there is no $defaultsConfirmModal variable then the plugin's default values will apply $.confirmModal('Are you really sure you want to do this?', function(el) { alert('Gratz, You confirmed!'); //do something... }); }); }); </script>Released under the MIT License