Forked from dgorissen/jquery.bootstrap.confirm.popover.js
Last active
December 16, 2015 13:49
-
-
Save walkingriver/5444655 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Copyright (c) 2011 Damien Antipa, http://www.nethead.at/, http://damien.antipa.at | |
Permission is hereby granted, free of charge, to any person obtaining | |
a copy of this software and associated documentation files (the | |
"Software"), to deal in the Software without restriction, including | |
without limitation the rights to use, copy, modify, merge, publish, | |
distribute, sublicense, and/or sell copies of the Software, and to | |
permit persons to whom the Software is furnished to do so, subject to | |
the following conditions: | |
The above copyright notice and this permission notice shall be | |
included in all copies or substantial portions of the Software. | |
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, | |
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF | |
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND | |
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE | |
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION | |
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION | |
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. | |
*/ | |
/* | |
* jQuery Plugin: Confirmation Dialog | |
* | |
* Requirements: jQuery 1.6.4, Bootstrap 2.x | |
* http://jquery.com/ | |
* http://twitter.github.com/bootstrap/ | |
* | |
* This Plugin can be used for anchors, to show a confirmation popup before redirecting to the link. | |
* Original code by Damian Antipa <http://damien.antipa.at/2011/10/jquery-plugin-confirmation/> | |
* | |
* Changes by WalkingRiver to work with jQuery 1.9 and the removal of $elem.data('events'). | |
* - The code now uses $._data(this, 'events'). | |
* - All click handler(s) registered are maintained and executed on the non-Cancel button. | |
* - Original jQuery event information is passed to the existing click handler(s). | |
* - Changed popover position to coincide with the mouse click. | |
* - Updated classes to work with Bootstrap 2.x. | |
* - Defaults to "right" placement instead of "left." | |
* | |
* Example Usage: | |
* $('a.delete') | |
* .click(function (event) { | |
* $(event.currentTarget).closest('tr').remove(); | |
* }).confirmDialog(); | |
*/ | |
(function ($) { | |
$.fn.extend({ | |
confirmDialog: function (options) { | |
var defaults = { | |
message: '<strong>Are you sure?</strong>', | |
dialog: '<div id="confirm-dialog" class="popover">' + | |
'<div class="arrow"></div>' + | |
'<div class="popover-inner">' + | |
'<div class="popover-content">' + | |
'<p class="message"></p>' + | |
'<p class="button-group"><a href="#" class="btn btn-small btn-danger"></a><a href="#" class="btn btn-small"></a></p>' + | |
'</div>' + | |
'</div>' + | |
'</div>', | |
cancelButton: 'Cancel' | |
}; | |
var options = $.extend(defaults, options); | |
return this.each(function () { | |
var o = options, | |
originalElement = this, | |
$elem = $(originalElement), | |
//save any existing click handler | |
targetClickFun = [], | |
existingClickHandlers = $._data(this, 'events').click, | |
i; | |
//is there an existing click handler registered | |
if (existingClickHandlers) { | |
// Save existing click handler(s) | |
for (i = 0; i < existingClickHandlers.length; i++) { | |
targetClickFun.push(existingClickHandlers[i].handler); | |
} | |
//unbind it to prevent it firing | |
$elem.unbind('click'); | |
} else { | |
//assume there is a href attribute to redirect to | |
targetClickFun.push(function () { window.location.href = $elem.attr('href'); }); | |
} | |
$elem.bind('click', function (originalEvent) { | |
originalEvent.preventDefault(); | |
if (!$('#confirm-dialog').length) { | |
var $dialog = $(o.dialog).appendTo('body'); | |
$dialog.find('p.button-group').css({ | |
marginTop: '5px', | |
textAlign: 'right' | |
}); | |
$dialog.find('a.btn').css({ | |
marginLeft: '3px' | |
}); | |
$dialog.find('p.message').html(o.message); | |
$dialog.find('a.btn:eq(0)').text($elem.text()).bind('click', function (e) { | |
$dialog.remove(); | |
for (i = 0; i < targetClickFun.length; i++) { | |
targetClickFun[i](originalEvent); | |
} | |
}); | |
$dialog.find('a.btn:eq(1)').text(o.cancelButton).bind('click', function (e) { | |
$dialog.remove(); | |
}); | |
$dialog.bind('mouseleave', function () { | |
$dialog.fadeOut('fast', function () { | |
$dialog.remove(); | |
}); | |
}); | |
// Now that the pop-over is all set up properly, we can size it through CSS | |
var width = $dialog.width(), | |
height = $dialog.height(), | |
left = originalEvent.pageX, | |
top = originalEvent.pageY - $dialog.height() / 2, | |
right = left + $dialog.width(); | |
// If there is room, position the box to the right of the mouse. | |
if (right < document.width) { | |
$dialog.addClass('right'); | |
} else { | |
//dialog has to be left | |
left -= width; | |
$dialog.addClass('left'); | |
} | |
$dialog.css({ | |
display: 'block', | |
position: 'absolute', | |
top: top, | |
left: left | |
}); | |
} | |
}); | |
}); | |
} | |
}); | |
})(jQuery); |
Example Usage:
$('a.delete')
.click(function (event) {
$(event.currentTarget).closest('tr').remove();
}).confirmDialog();
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
We needed a simple confirmation dialog for a delete link. We found this, since we use Bootstrap, but it didn't work with jQuery 1.9 and Bootstrap 2.3.1. I forked it and updated it to work, and also made some other changes: