jQuery中点击/触摸复选框无法触发Overlay弹窗的问题求助

我一眼就找到问题所在啦！你的弹窗逻辑没触发的核心原因是插件调用方式和插件本身的设计不匹配，跟标签未闭合这类小问题无关~

问题分析 #

你的paulund_modal_box()插件的作用是：给目标元素（这里是.paulund_modal）绑定一个click事件，只有当用户点击这个元素时，才会执行弹窗的创建和显示代码。但你现在是在.touch-checkbox的点击事件里调用这个方法——这相当于只是给.paulund_modal绑定了点击事件，并没有直接触发弹窗（除非你接着再点击.paulund_modal，这显然不是你想要的效果）。

这就是为什么console.log('hi')能执行，但插件里的console.log('hi11')没动静的原因：后者只有在.paulund_modal被点击时才会触发，而你并没有触发这个点击动作。

修复方案（两种可选） #

方案一：修改插件，让调用时直接显示弹窗

把插件里绑定click事件的逻辑改成直接执行弹窗代码，这样调用插件时就会立刻弹出窗口，不需要额外点击：

(function($){
 $.fn.paulund_modal_box = function(prop){
 var options = $.extend({
 height : "250",
 width : "300",
 title:"Please select your time",
 description: "",
 top : ($(window).outerHeight() / 4) + 'px',
 left : (($(window).width() - 300) / 2) + 'px',
 },prop);

 // 直接执行弹窗逻辑，替换原来的return this.click(...)
 add_block_page();
 add_popup_box();
 add_styles();
 $('.paulund_modal_box').fadeIn();

 function add_styles(){
 $('.paulund_modal_box').css({
 'position':'absolute',
 'left':options.left,
 'top':options.top,
 'display':'none',
 'height': options.height + 'px',
 'width': options.width + 'px',
 'border':'1px solid #fff',
 'box-shadow': '0px 2px 7px #292929',
 '-moz-box-shadow': '0px 2px 7px #292929',
 '-webkit-box-shadow': '0px 2px 7px #292929',
 'border-radius':'10px',
 '-moz-border-radius':'10px',
 '-webkit-border-radius':'10px',
 'background': '#f2f2f2',
 'z-index':'50',
 });
 $('.paulund_modal_close').css({
 'position':'relative',
 'top':'0px',
 'left':'20px',
 'float':'right',
 'font-size':'20px',
 'display':'block',
 'height':'50px',
 'width':'50px',
 });
 $('.paulund_modal_close').html( '<i class="fa fa-times"></i>' );
 /*Block page overlay*/
 var pageHeight = $(document).height();
 var pageWidth = $(window).width();
 $('.paulund_block_page').css({
 'position':'absolute',
 'top':'0',
 'left':'0',
 'background-color':'rgba(0,0,0,0.6)',
 'height':pageHeight,
 'width':pageWidth,
 'z-index':'10'
 });
 $('.paulund_inner_modal_box').css({
 'background-color':'#fff',
 'height':(options.height - 50) + 'px',
 'width':(options.width - 50) + 'px',
 'padding':'10px',
 'margin':'15px',
 'border-radius':'10px',
 '-moz-border-radius':'10px',
 '-webkit-border-radius':'10px'
 });
 }
 function add_block_page(){
 var block_page = $('<div class="paulund_block_page"></div>');
 $(block_page).appendTo('body');
 }
 function add_popup_box(){
 var pop_up = $('<div class="paulund_modal_box"><a href="#" class="paulund_modal_close"></a><div class="paulund_inner_modal_box"><h3>' + options.title + '</h3><p>' + options.description + '</p> <div><p>hello</p></div></div></div>');
 $(pop_up).appendTo('.paulund_block_page');
 $('.paulund_modal_close').click(function(e){
 e.preventDefault(); // 防止a标签跳转页面
 $(this).parent().fadeOut(function(){
 $(this).remove(); // 动画结束后再移除元素
 });
 $('.paulund_block_page').fadeOut(function(){
 $(this).remove();
 });
 });
 }
 return this;
 };
})(jQuery);

方案二：不修改插件，手动触发目标元素的点击事件

保持插件代码不变，修改调用逻辑：先绑定事件，再手动触发.paulund_modal的点击动作：

$(function(){
 $('div.touch-checkbox').on('click touchstart', function(e) {
 e.stopPropagation();
 if (console && console.log) console.log('hi');
 // 先绑定弹窗事件，再手动触发点击
 $('.paulund_modal').paulund_modal_box().click();
 });
});

额外优化建议 #

1. 给.paulund_modal添加display:none样式，因为它只是一个逻辑载体，不需要显示在页面上：

.paulund_modal {
  display: none;
}

2. 关闭按钮的click事件里加上e.preventDefault()，避免点击<a href="#">导致页面跳转到顶部。

内容的提问来源于stack exchange，提问作者Larry.Z