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