Question

我正在创建一个模式弹出窗口，可以在页面上使用嵌入的视频。一切都很好，除了某些原因我不能让我的关闭按钮工作。我尝试过使用this教程以及其他一些教程，但我无法让我的生活得以实现。我在这里缺少什么？

<!DOCTYPE html>
<!--[if IE 7]> <html class="ie ie7 no-js" lang="en-US"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 no-js" lang="en-US"> <![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!--> <html lang="en-US" class="no-js"> <!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=700, initial-scale=0.5" />

<link rel='stylesheet' href='css/style.css' type='text/css' media='all' />
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700|PT+Sans+Narrow:400,700|Roboto+Slab:700' rel='stylesheet' type='text/css'>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>

<script type="text/javascript"> 

jQuery(document).ready(function() {

if (window.mobilecheck()) {
  window.location.replace("http://6minutestoskinny.com/index-cbm.html"+document.location.search);
} else {
setTimeout(function(){ 
    jQuery('#subscribeNow').show(); jQuery('#subscribeNow2').show();
    //jQuery('#optinNow').show(); jQuery('#optinNow2').show();
    //jQuery('#optinform').css('top', '700px');
}, 1638 * 1000);

setTimeout(function() { 
    /* make the form appear */
    jQuery('#optinform').fadeIn();
    //jwplayer().pause();

    jwplayer("player").setup({
          flashplayer: "player.swf",
          file: “video.mp4",
          width: "100%",
          height: document.getElementById("video-frame").offsetHeight-20,
          stretching: "exactfit",
          primary: "flash",
          controlbar: "false",
          volume: "100",
          autostart: "true",
          image: “image.jpg",
      });

//}, 1822 * 1000);
//}, 15 * 1000);
}, 500);
}

$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(500);
return false;

$('button.close, #mask').live('click', function() {
$('#mask , #optinform').fadeOut(400, function() {
    $('#mask').remove();
});
return false;
});

$('button.close, #mask').live('click', function() {

$('#mask, .optinInfo').fadeOut(400, function() {

    $('#mask').remove();
});

return false;
});

});
</script>

<style type="text/css">

#mask {
    display: none;
    background:rgba(0, 0, 0, 0.7);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
}

#optinform {
    background:rgba(0, 0, 0, 0.7);
    width: 900px;
    /* height: 546px; */
    z-index: 1000;
    position: fixed;
    top: 10%;
    left: 12%;
    overflow:hidden;
    margin: 0;
    padding: 0;
    filter:   progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);
    }

#video-frame {
    height: 0px;
    width: 100%;
    max-width: 720px;
    background: #222529;
    border: 11px solid #fff;
    -moz-box-shadow: 0px 0px 19px 9px #333;
    -webkit-box-shadow: 0px 0px 19px 9px #333;
    box-shadow: 0px 0px 19px 9px #333;
    margin: auto;
    position: relative;
    padding-bottom: 58.25%;
}

</style>

</head>

<body>

<div id="optinform" class="optinInfo" style="display:none;">
<button type="button" class="close" style="float: right;margin: 5px;">Close</button>

    <div id="video-frame">
        <div id="player"><img src=“image.jpg border="0" alt="Loading the Player" style="width: 100%;" class="img-responsive" /></div>
    </div>

</div><!-- optin form -->

Answer 1

jQuery live()已被弃用，您应该转而使用jQuery on()并从静态父元素委托事件，因为<div id="mask">被附加到DOM而不是最初加载页面时的DOM。例如：

$(document).on("click", "button.close, #mask", function() {
   $('#mask , #optinform').fadeOut(400, function() {
     $('#mask').remove();
   });
 return false;
});

这是未经测试的，但仅供参考：https://api.jquery.com/on/#on-events-selector-data-handler，“直接和委派活动”部分：

“事件处理程序仅绑定到当前选定的元素;它们必须存在于代码调用.on（）时页面上。”

http://api.jquery.com/live/：

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）来附加事件处理程序。旧版jQuery的用户应该使用 .delegate（）优先于.live（）。

更新：正如评论中所述，建议的解决方案无法解决问题。我刚刚用OP中提供的代码调整了一个小提琴，并注意到关闭按钮不起作用。调整后应该有效：

$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(500);
//return false;  <-- remove this line

删除return false下方的$("mask").fadeIn(500);。虽然我没有完整的代码（也没有播放视频），但它正在使用此Fiddle，并且也适用于您的设置。

Javascript关闭弹出窗口无法正常工作

1 个答案: