通过esc键或外部点击检测jquery显示插件模式关闭
Detect jquery reveal plugin modal close by esc key or clicking outside
我正在使用jquery显示插件来显示弹出窗口。我正在jquery或javascript中寻找一种方法,当弹出窗口关闭时,我可以通过按下esc键或在弹出窗口外单击来触发适当的事件。有什么方法可以让我捕捉到这个事件吗?
在显示插件网站上,只给出了几个选项,比如:
$('#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
});
这个插件还有其他选项吗?如果是,请为我提供链接。
根据来源,在这两种情况下都会触发一个名为"show:close"的事件,您应该能够通过为该事件添加自己的处理程序
$yourModal.bind('reveal:close', function () {
console.log('Modal closed');
});
当您需要知道它是以何种方式关闭的时,可以使用"show:open"事件在文档对象上添加keyup事件处理程序,或在.show-modalbg元素上添加click事件处理程序。
$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.
});
});
-
打开
jquery.reveal.js
。 -
添加新选项:
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 }; -
在文件
jquery.validate
中,找到包含e.which===27
的行。完整的线路是:
if(e.which===27){ modal.trigger('reveal:close'); }
-
修改并验证此行中的新选项
escape
:if(e.which===27 && options.escape === true){ modal.trigger('reveal:close'); }
-
就是这样。现在
escape
选项起作用了。
- 如何在页面重新加载时显示jquery ui对话框
- 如何为显示jquery滑块值的文本框设置默认值
- 突出显示jQuery中单词之间的空格
- 不显示 jQuery 不显眼的验证摘要
- Rails-jQuery 为什么我必须单击两次才能显示 jQuery 效果
- 如何在页面导航上显示jquery警报
- Slider和Date Picker未显示JQuery
- 键入时不要显示jQuery UI自动完成
- 如何显示jQuery自动完成响应并选择它
- 如何在返回后将状态保持为突出显示JQuery树视图的选定节点
- 检测文本是否在鼠标上突出显示jQuery
- 30 秒后显示 Jquery UI 对话框
- X 可编辑的编辑值不显示 jquery 集值
- 显示 jQuery 复选框选择
- 用于显示字段的工具提示和显示 Jquery 验证中的错误的工具提示器
- 如果站点上存在多个滑块,则显示 Jquery UI 滑块的值
- 谷歌地图信息框能够显示JQuery UI小部件
- 在标签中以 asp.net 显示 jQuery 的结果
- 当 Javascript 在浏览器中关闭时显示 Jquery .slide() 表单
- 在 Leaflet Map 上显示 jQuery 动态 GeoJSON 内容