I am using jquery reveal plugin for showing pop-up. I am looking for a way in jquery or javascript by which I can trigger an appropriate event when that popup was closed by pressing esc key or clicking outside of pop-up. Is there any way by which I can capture this event?
And on reveal plugin website only few options are given, like:
$('#myModal').reveal({
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: true, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
});
Are there any more options for this plugin? If so, please provide me link for that.
According to the source an Event called 'reveal:close' is fired in both cases and you should be able to add your own handler for that event through
$yourModal.bind('reveal:close', function () {
console.log('Modal closed');
});
When you need to know in which way it was closed you could use the 'reveal:open' event to add either a keyup event handler on the document-object or a click event handler on the .reveal-modal-bg element.
$yourModal.bind('reval:open', function () {
var $document = $(document);
$document.bind('keyup', function onEscHandler( event ) {
if (event.which === 27) {
console.log('closed by ESC');
// Modal is closed, let's remove the handler again
$document.unbind('keyup', onEscHandler);
}
});
var $modal_bg = $('.reveal-modal-bg');
$modal_bg.one('click', function onBgClidkHandler() {
console.log('closed by click on BG');
// We don't need to remove this handler since 'one' does it automatically.
});
});
Open jquery.reveal.js
.
Add new option:
var defaults = {
animation: 'fadeAndPop', animationspeed: 300, closeonbackgroundclick: true, dismissmodalclass: 'close-reveal-modal' escape: true // true: modal close with Esc. false: modal no close with Esc };
In the file jquery.validate
, find the line that content e.which===27
.
Complete line is:
if(e.which===27){ modal.trigger('reveal:close'); }
Modify and validate new option escape
in this line:
if(e.which===27 && options.escape === true){ modal.trigger('reveal:close'); }
That's it. Now the escape
option works.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.