Skip to content

Instantly share code, notes, and snippets.

@MartinL83
Last active August 29, 2015 14:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MartinL83/11124938 to your computer and use it in GitHub Desktop.
Save MartinL83/11124938 to your computer and use it in GitHub Desktop.
Simple confirm modal on inputs / links / whatever trough data-attr. Will launch a (Twitter) Bootstrap modal on elements that have a data-confirm-action="confirm". Some settings available. **Needs loads of improvements**
// Confirmation modal on elements that have 'confirm' class.
// Will launch a modal and ask for confirmation.
// data-confirm-action="confirm" - Will enable the confirm modal
// data-confirm-title="" - Custom title, optional
// data-confirm-text="" - Custom modal text, optional.
;(function ( $, window, document, undefined ) {
// Create the defaults once
var pluginName = "confirmAction",
defaults = {
title: '', // Title for modal
content: '', // Content for modal
form: '', // Parent form ($ object) if any.
url: '' // URL to execute if link.
};
// Global setting to set if we have confirmed or not.
var confirmed = false;
// The actual plugin constructor
function Plugin ( element, options ) {
this.element = element;
this.settings = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.getTitle(this.element,this.settings); // Set title
this.getContent(this.element,this.settings); // Set content
this.getUrl(this.element,this.settings); // Set url (if any)
this.getForm(this.element,this.settings); // Get parent form (if any)
this.init();
}
Plugin.prototype = {
init: function () {
var self = this;
var elm = jQuery(self.element);
elm.click(function(e){
if( confirmed === false ) {
e.preventDefault();
self.confirm(self.element,self.settings);
}
});
},
//Will get fired when element gets clicked on.
confirm: function(element,settings) {
this.createModal(element,settings);
},
//Calculate title for modal
getTitle: function (element,settings) {
if ( jQuery(element).attr('data-confirm-title') ) {
settings.title = jQuery(element).attr('data-confirm-title');
}
else {
settings.title = 'Bekräfta';
}
},
//Calculate content for modal
getContent: function(element,settings) {
if( jQuery(element).attr('data-confirm-text') ) {
settings.content = jQuery(element).attr('data-confirm-text');
}
else {
settings.content = 'Denna åtgärd går ej att ångra. Är du säker på detta?';
}
},
//Get URL of element to go to after confirm
getUrl: function(element,settings) {
var elm = jQuery(element);
if( settings.url === '' && settings.form === '' && elm.attr('href') ){
settings.url = elm.attr('href');
}
},
//Get form to submit after confirm.
getForm: function(element,settings) {
var elm = jQuery(element);
if( settings.url === '' && settings.form === '' ){
var formObject = elm.parent('form');
settings.form = formObject;
}
},
//Function to perform when "confirm" is clicked in modal
confirmAction: function(element,settings){
// We have confirmed the action
confirmed = true;
if(this.settings.url !== '' && this.settings.form === ''){
window.location.href = this.settings.url;
}
else if (this.settings.url === '' && this.settings.form !== '') {
jQuery(this.element).trigger('click');
}
else {
alert('End URL or form object not specified');
}
},
//Creates the modal dialog.
createModal: function(element,settings){
var self = this;
var id = 'infoModal'+jQuery(element).index();
var title = this.settings.title;
var content = this.settings.content;
var modal_wrap;
//Build modal.
modal_wrap = jQuery('<div />')
.addClass('modal fade')
.attr('id',id)
.appendTo('body');
var modalInner = jQuery('<div />')
.addClass('modal-dialog')
.appendTo(modal_wrap);
var modalContent = jQuery('<div />')
.addClass('modal-content')
.appendTo(modalInner);
var header_wrap = jQuery('<div />')
.addClass('modal-header')
.appendTo(modalContent);
var header_title = jQuery('<h4 />')
.text(title)
.appendTo(header_wrap);
var body = jQuery('<div />')
.addClass('modal-body')
.html(content)
.appendTo(modalContent);
var footer = jQuery('<div />')
.addClass('modal-footer')
.appendTo(modalContent);
var footerClose = jQuery('<button />')
.attr('type','button')
.attr('data-dismiss','modal')
.text('Avbryt')
.addClass('btn btn-default')
.appendTo(footer);
var confirm = jQuery('<button />')
.attr('type','button')
.text('Fortsätt')
.addClass('btn btn-primary')
.appendTo(footer)
.click(function(){
self.confirmAction(element,settings);
});
//Clear DOM on close
modal_wrap.modal('show').on('hidden.bs.modal', function (e) {
jQuery('#'+id).remove();
});
}
};
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[ pluginName ] = function ( options ) {
return this.each(function() {
if ( !$.data( this, "plugin_" + pluginName ) ) {
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
}
});
};
})( jQuery, window, document );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment