【发布时间】：2018-01-13 19:54:07
【问题描述】：
我是 jQuery 和 html 的新手（之前只反应过）。
现在我想在触摸触摸设备上的复选框时触发覆盖。
其实我已经完成了这个功能（完美运行），但是经过一些操作（比如 git commit 或其他我不知道的东西）后，该功能突然无法工作（覆盖无法显示）。
我整晚都在尝试调试。我想这一定是我犯了一些小错误（比如错误的结束标签或类似的东西），但我找不到。
这是我的代码：
$(function(){
$('div.touch-checkbox').on('click touchstart', function(e) {
// e.stopPropagation();
if (console && console.log) console.log('hi');
$('.paulund_modal').paulund_modal_box();
});
});
//the modal
(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);
if (console && console.log) console.log($(window).width());
return this.click(function(){
//this line of console log didn't run
if (console && console.log) console.log('hi11');
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(){
$(this).parent().fadeOut().remove();
$('.paulund_block_page').fadeOut().remove();
});
}
return this;
};
})(jQuery);.touch-checkbox{
z-index:3;
height:11px;
cursor: pointer;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="description" content="First time using jQuery">
<meta name="viewport" content="width=device-width, initial-scale=1.0001">
<link href="style/screen.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></scrip\
t>
<script type="text/javascript" src="js/checkbox-touch-device.js"></script>
</head>
<body>
<div id="portrait">
<div class="paulund_modal"></div>
<p>hello</p>
<div class="touch-checkbox">
<input id="sun12am" type="checkbox"> <label for="sun12am"></label>
</div>
</div>
</body>
</html>如您所见，我想为.touch-checkbox 类提供点击触发器（我只在本地开发环境中将touchstart 与媒体查询一起使用，使用单击此处获取代码片段。）。
JS文件中if (console && console.log) console.log($(window).width());之前的代码有用，但不能返回覆盖。
我猜 JS 文件中的return this.click(function() 有问题。
我确定这段代码一开始确实有效，我只是想知道为什么不修改它就不能工作（可能是我错误地修改了它但我没有识别出来）......
有人可以帮助我吗？非常感谢。
【问题讨论】：
标签： javascript jquery html checkbox overlay