在项目中经常需要写一些通知弹出窗，这时就会经常使用到Popover组件。有时候制作一些弹出窗时，我做到只有用户点击了“确定”或者其他按钮时才会关闭，这个时候我就得想办法禁用其自带的“点击黑色背景后会关闭Popover”的这个功能。
通过阅读源码我找到了点击黑色背景关闭Popover的代码位置：
/**
* Popovers
* @param {type} $
* @param {type} window
* @param {type} document
* @param {type} name
* @param {type} undefined
* @returns {undefined}
*/
(function($, window, document, name) {
……
var backdrop = (function() {
var element = document.createElement('div');
element.classList.add(CLASS_BACKDROP);
element.addEventListener($.EVENT_MOVE, $.preventDefault);
element.addEventListener('tap', function(e) {
var popover = $.targets._popover;
if (popover) {
popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
popover.classList.remove(CLASS_ACTIVE);
removeBackdrop(popover);
document.body.setAttribute('style', ''); //webkitTransitionEnd有时候不触发？
}
});
return element;
}());
有没有看到，在tap事件的侦听函数中做了Popover关闭的动作，此时我们若想要通过一个开关变量来控制其“自动关闭”功能的开启与关闭的话就像我一样加上如下一句代码：
element.addEventListener('tap', function(e) {
var popover = $.targets._popover;
if (popover) {
if(popover.getAttribute('data-disable-auto-close'))return;//added by S_eVent 阻止点击遮罩关闭弹窗
popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
popover.classList.remove(CLASS_ACTIVE);
removeBackdrop(popover);
document.body.setAttribute('style', ''); //webkitTransitionEnd有时候不触发？
}
});
这样的话我们就通过一个“data-disable-auto-close”属性来控制Popover自动关闭功能的开关了，比如我有如下一个Popover准备弹出
<div class="mui-popover">弹出窗口</div>
那么给它加上data-disable-auto-close属性就能控制其黑色背景在点击后不会关闭Popover了
<div class="mui-popover" data-disable-auto-close=“true”>弹出窗口</div>
