彈出窗口上的JavaScript關閉無法正常工作

Question

我正在創建一個與頁面上的嵌入式視頻一起使用的模式彈出窗口。 一切都很好，除了由於某些原因我無法使關閉按鈕正常工作。 我已經嘗試過和其他一些人一起使用本教程，但我終生無法正常工作。 我在這里想念什么？

<!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

刪除$("mask").fadeIn(500);下的return false $("mask").fadeIn(500); 。 盡管我沒有完整的代碼（並且沒有視頻播放），但是它在此Fiddle中有效，並且也可以用於您的設置。

彈出窗口上的JavaScript關閉無法正常工作

問題描述

1 個解決方案

解決方案1
0 2014-10-24 22:05:30

彈出窗口上的JavaScript關閉無法正常工作

問題描述

1 個解決方案

解決方案1 0 2014-10-24 22:05:30

解決方案1
0 2014-10-24 22:05:30