Question

我想在我的主页上显示一个onload youtube video JQuery popup。

查看互联网并“混合”一些代码，我的结果如下。

它似乎做我想做的事情，但“关闭”按钮不起作用。

当我按下“关闭”时，弹出窗口隐藏但继续向后播放。

有人可以帮助我吗？

谢谢！

代码：

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery Show Popup on Page Load</title>

<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

/* video settings come here */
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '350',
width: '600',
videoId: 'L8ARwB3CihA',
events: {
'onReady': onPlayerReady
}
});
}
/* Autoplay when the dialog opens */
function onPlayerReady(event) {
event.target.playVideo();
}
$(document).ready(function(){
var overlay = jQuery('<div id="overlay"></div>');
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});


$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});

$('.click').click(function(){
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
});
});
</script>



<script type=’text/javascript’>
$(function(){
var overlay = $(‘<div id=”overlay”></div>’);
overlay.show();
overlay.appendTo(document.body);
$(‘.popup’).show();
$(‘.close’).click(function(){
$(‘.popup’).pauseVideo();
overlay.appendTo(document.body).remove();
return false;
});

</script>
</head>
<body>
<div class='popup'>
<div class='content'>
<div id='player'></div>
<p><a href='' class='close'>Fechar</a></p>
<br/>
<br/>
</p>
</div>
</div>
</body>
</html>

Answer 1

试试这个，我自己没有测试过它

$('.close').click(function(){
$('.popup').remove(); // Change hide() to remove()
overlay.appendTo(document.body).remove();
return false;
});

JQuery popup隐藏但没有关闭

1 个答案: