Simple Materialize Confirmation Modals
Sat, 25 March 2017
ajs.js
jQuery.fn.extend({ AjsConfirm: function(positive_callback, negative_callback) { if (typeof positive_callback == 'string') { if (positive_callback == 'off') { return this.each(function() { $(this).off('click'); }); } } var bindButtonsFor = function(ajsId) { $('.' + ajsId + 'Ok').off('click'); $('.' + ajsId + 'Cancel').off('click'); $('.' + ajsId + 'Ok').on('click', function(e){ e.preventDefault(); $('#ajsConfirm' + ajsId).modal('close'); positive_callback(e, $('#' + ajsId)); }); $('.' + ajsId + 'Cancel').on('click', function(e){ e.preventDefault(); $('#ajsConfirm' + ajsId).modal('close'); negative_callback(e, $('#' + ajsId)); }); }; return this.each(function() { $(this).off('click'); $(this).on('click', function(e){ e.preventDefault(); var element = $(this); if (typeof positive_callback == "undefined"){ positive_callback = function(){}; } if (typeof negative_callback == "undefined"){ negative_callback = function(){}; } var ajsId = $(this).attr('id'); var existing = $('#ajsConfirm' + ajsId).length; if (existing > 0) { $('#ajsConfirm' + ajsId).modal('open'); return; } var title = '', message = '', ok = '', cancel = ''; if (typeof $(this).attr('data-ajs-title') != "undefined") { title = $('<h5 />').html($(this).attr('data-ajs-title')); } if (typeof $(this).attr('data-ajs-msg') != "undefined") { message = $('<p />').html($(this).attr('data-ajs-msg')); } if (typeof $(this).attr('data-ajs-ok') != "undefined") { if ($(this).attr('data-ajs-ok') != '') { ok = $('<a />').addClass(ajsId + 'Ok').addClass('modal-action').addClass('btn-flat').addClass('blue').addClass('white-text').html($(this).attr('data-ajs-ok')); } } if (typeof $(this).attr('data-ajs-cancel') != "undefined") { if ($(this).attr('data-ajs-cancel') != '') { cancel = $('<a />').css('marginRight', '10px').addClass(ajsId + 'Cancel').addClass('modal-action').addClass('btn-flat').addClass('grey').addClass('lighten-2').addClass('black-text').html($(this).attr('data-ajs-cancel')); } } var wrap; wrap = $('<div />').attr('id', 'ajsConfirm' + ajsId).addClass('modal').append( $('<div />').addClass('modal-content').append(title).append(message) ).append( $('<div />').addClass('modal-footer').append(ok).append(cancel) ); $('body').append(wrap); $('#ajsConfirm' + ajsId).modal(); $('#ajsConfirm' + ajsId).modal('open'); bindButtonsFor(ajsId); }); }); } });
usage.html
<a href="#" data-example-tag="FooBar" class="confirmation" id="confirmation" data-ajs-ok="Yes" data-ajs-cancel="Cancel" data-ajs-title="Simple Confirmation" data-ajs-msg="Are you sure?" > Confirm example </a> <pre> These attributes are utilised: id="" - must be unique to an element data-ajs-ok="" - the OK button text to display - optional data-ajs-cancel="" - the Cancel button text to display - optional data-ajs-title="" - the title of the modal - optional data-ajs-msg="" - the body message of the modal - optional </pre> <script> $(document).ready(function(){ $('.confirmation').AjsConfirm( function(e, element) { // Confirmed console.log('Confirmed'); console.log(element.attr('data-example-tag')); // FooBar }, function(e, element) { // Cancelled console.log('Cancelled'); console.log(element.attr('data-example-tag')); // FooBar } ); }); </script>