单击浮动 div 中的链接不起作用
Clicking Links inside my floating div does not work
我有这些电影，点击电影时会出现浮动 div。
在此浮动 div 中，我需要在 div 打开时将 link 放入视频/预告片中。我放入 div 中的任何 link 在单击时都不起作用。 Chrome 甚至在将鼠标悬停在 link 上时显示 link，但单击它什么也没做。
浮动 div 之外的任何 link 都可以正常工作。
我该如何解决这个问题？
请使用 运行 代码检查此演示。谢谢。
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="app">
<h3>Most Popular Movies</h3>
<section class="movies">
<div class="movie">
<img src="https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_.jpg" alt="" class="poster" />
<div class="title">Avengers: Endgame</div>
<div class="info">
<span class="length">182 min</span>
<span class="year">2019</span>
</div>
<div class="desc">
Adrift in space with no food or water, Tony Stark sends a message to Pepper Potts as his oxygen supply starts to dwindle. Meanwhile, the remaining Avengers Thor, Black Widow, Captain America and Bruce Banner must figure out a way to bring back their vanquished allies for an epic showdown with Thanos the evil demigod who decimated the planet and the universe.
<br>
<a target="_blank" class="info-btn color small" href="https://www.youtube.com/watch?v=TcMBFSGVi1c"><i class="fas fa-info-circle"></i> Play Trailer</a>
<div>
</div>
<a class="popup-youtube" href="https://www.youtube.com/watch?v=TcMBFSGVi1c">Popup</a>
</div>
</div>
<div class="movie">
<img src="https://m.media-amazon.com/images/M/MV5BMjU0NDk0N2EtNTliZS00MjNmLTk0M2MtYTMzOTUxMGQwZWI3XkEyXkFqcGdeQXVyMzE0MTQ2NzQ@._V1_.jpg" alt="" class="poster" />
<div class="title">Top End Wedding</div>
<div class="info">
<span class="length">113 min</span>
<span class="year">2019</span>
</div>
<div class="desc">
Lauren and Ned have 10 days to find Lauren's mother who has gone AWOL in the remote far north of Australia so that they can reunite her parents and pull off their dream wedding.
<a target="_blank" class="info-btn color small" href="https://www.dolby.com/us/en/cinema"><i class="fas fa-info-circle"></i> Play Trailer</a>
</div>
</div>
<div class="movie">
<img src="https://cineprog.de/images/Breite_400px_RGB/p_77672.jpg" alt="" class="poster" />
<div class="title">Dumbo</div>
<div class="info">
<span class="length">112 min</span>
<span class="year">2019</span>
</div>
<div class="desc">
Struggling circus owner Max Medici enlists a former star and his two children to care for Dumbo, a baby elephant born with oversized ears. When the family discovers that the animal can fly, it soon becomes the main attraction bringing in huge audiences and revitalizing the run-down circus. The elephant's magical ability also draws the attention of V.A. Vandevere, an entrepreneur who wants to showcase Dumbo in his latest, larger-than-life entertainment venture.
<a target="_blank" class="info-btn color small" href="https://www.dolby.com/us/en/cinema"><i class="fas fa-info-circle"></i> Play Trailer</a>
</div>
</div>
<div class="movie">
<img src="https://m.media-amazon.com/images/M/MV5BODVjZThlMzMtZjQwNy00YjRlLWE5ZTMtMWVlMWUwM2U1NjRkXkEyXkFqcGdeQXVyODcyODY1Mzg@._V1_UY1200_CR90,0,630,1200_AL_.jpg" alt="" class="poster" />
<div class="title">The Happy Prince</div>
<div class="info">
<span class="length">105 min</span>
<span class="year">2018</span>
</div>
<div class="desc">
His body ailing, Oscar Wilde lives out his last days in exile, observing the difficulties and failures surrounding him with ironic detachment, humour, and the wit that defined his life.
<a target="_blank" class="info-btn color small" href="https://www.dolby.com/us/en/cinema"><i class="fas fa-info-circle"></i> Play Trailer</a>
</div>
</div>
</section>
<div class="detail">
<svg class="close">
<use xlink:href="#close"></use>
</svg>
<div class="movie">
<img src="https://github.com/supahfunk/supah-codepen/blob/master/movie-room.jpg?raw=true" alt="" class="poster" />
<div class="title">Room</div>
<div class="info">
<span class="length">117 min</span>
<span class="year">2015</span>
</div>
<div class="desc">
Jack is a young boy of 5 years old who has lived all his life in one room. He believes everything within it are the only real things in the world. But what will happen when his Ma suddenly tells him that there are other things outside of Room?
<a target="_blank" class="info-btn color small" href="https://www.dolby.com/us/en/cinema"><i class="fas fa-info-circle"></i> Play Trailer</a>
</div>
</div>
</div>
</div>
<a class="popup-youtube" href="https://www.youtube.com/watch?v=TcMBFSGVi1c">Trailer Popup</a>
</div>
CSS
/*Card APP*/
/*-------------------- Body --------------------*/
*, *::before, *::after {
box-sizing: border-box;
}
/*-------------------- App --------------------*/
.app {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vw;
height: 390px;
background: #fff;
border-radius: 15px;
box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
}
.app h3 {
color: #525661;
font-size: 17px;
box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.1);
padding: 20px 28px 0;
margin: -6px 0 0 0;
}
/*-------------------- Movies --------------------*/
.movies {
display: flex;
padding: 8px 18px;
}
.movies .movie {
padding-right:10%;
cursor: pointer;
}
.movies .movie .poster {
width:11vw;
margin-bottom: 6px;
border-radius: 4px;
}
.movies .movie .poster.active {
opacity: 0;
}
.movies .movie .title {
color: #525661;
margin-bottom: 4px;
font-size: 16px;
}
.movies .movie .info {
font-size: .95vmax;
opacity: 0.8;
color: #8b9095;
font-family: 'Roboto', sans-serif;
}
.movies .movie .desc {
display: none;
}
/*-------------------- Detail --------------------*/
.detail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
padding: 37px 30px 30px 255px;
display: none;
}
.detail::before {
content: '';
background: #fff;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 15px;
opacity: 0;
transition: all 0.4s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}
.detail .close {
position: absolute;
top: 21px;
right: 22px;
width: 12px;
height: 12px;
cursor: pointer;
border: 6px solid #fff;
box-sizing: content-box;
z-index: 10;
}
.detail .poster {
position: absolute;
z-index: 2;
top: -10%;
left: -6%;
height: 100%;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
transition: all 0.5s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}
.detail .title, .detail .info, .detail .desc, .detail .play, .detail .close {
transform: translateX(-50px);
opacity: 0;
transition: all 0.4s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}
.detail .close {
transform: translateX(10px);
}
.detail .title {
font-size: 3vmax;;
font-weight: 300;
color: #525661;
margin-bottom: 5px;
}
.detail .info {
font-size: .95vmax;
opacity: 0;
margin-left: 2px;
color: #8b9095;
font-family: 'Roboto', sans-serif;
}
.detail .desc {
text-align: left;
margin-top: 30px;
font-size: 1.25vmax;
line-height: 1.6;
text-align: left;
color: #8b9095;
font-family: 'Roboto', sans-serif;
}
.detail .play {
background: linear-gradient(90deg, #e4761f, #ff8b32);
border: none;
border-radius: 20px;
color: #fff;
font-size: 12px;
line-height: 1.5;
padding: 8px 17px;
margin: 30px 0 0 -2px;
text-transform: uppercase;
z-index: 10;
outline: none !important;
cursor: pointer;
opacity: 0;
}
.detail .play svg {
vertical-align: middle;
position: relative;
top: -2px;
margin-right: 3px;
}
.detail.ready::before {
opacity: 1;
}
.detail.ready .info {
opacity: 0.8;
}
.detail.ready .poster {
opacity: 1;
transition-duration: 0.5s;
}
.detail.ready .title, .detail.ready .info, .detail.ready .desc, .detail.ready .play, .detail.ready .close {
transform: translateX(0);
opacity: 1;
transition-delay: 0s;
transition-duration: 0.5s;
}
.detail.ready .title {
transition-delay: 0.2s;
}
.detail.ready .info {
transition-delay: 0.3s;
}
.detail.ready .desc {
transition-delay: 0.4s;
}
.detail.ready .play {
transition-delay: 0.5s;
}
.the-most {
position: fixed;
z-index: 1;
bottom: 0;
left: 0;
width: 50vw;
max-width: 200px;
padding: 10px;
}
.the-most img {
max-width: 100%;
}
JS
var $play = $('.play'),
$detail = $('.detail'),
$movie = $('.movie', $detail),
$close = $('.close');
$('.movies .movie').click(function(){
$movie.html($(this).html());
$play.appendTo($movie);
$poster = $('.poster', this).addClass('active');
$('.poster', $detail).css({
top: $poster.position().top,
left: $poster.position().left,
width: $poster.width(),
height: $poster.height()
}).data({
top: $poster.position().top,
left: $poster.position().left,
width: $poster.width(),
height: $poster.height()
})
$detail.show();
$('.poster', $detail).delay(10).queue(function(next) {
$detail.addClass('ready');
next();
}).delay(100).queue(function(next){
$(this).css({
top: '-10%',
left: '-6%',
width: 266,
height: 400
});
next();
})
})
/*--------------------
Close
--------------------*/
function close(){
console.log('asd');
$p = $('.detail .poster');
console.log($p)
$p.css({
top: $p.data('top'),
left: $p.data('left'),
width: $p.data('width'),
height: $p.data('height'),
})
$detail.removeClass('ready').delay(500).queue(function(next){
$(this).hide();
$poster.removeClass('active');
next();
});
}
$close.click(close);
$('body').click(function(e){
$p = $(e.target).parents();
if ($p.is('.app')){
return false;
} else {
close();
}
})
/*--------------------
Thumbnail preview
--------------------*/
setTimeout(function(){
$('.movie:eq(0)').click();
}, 300);
setTimeout(function(){
close();
},1700);
//popup trailer
$(document).ready(function() {
$('.popup-youtube').magnificPopup({
type: 'iframe'
});
});
//---------------Mobile--------------
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
在正文点击时监听并返回 false 不是一个好习惯。
用下面的代码替换您的代码以使其工作
$('body').click(function(e){
$p = $(e.target).parents();
if ($p.is('.app')){
if ($(e.target).hasClass('info-btn')) {
return true
}
else {
return false;
}
} else {
close();
}
})
我认为这与此有关：
$('body').click(function(e){
$p = $(e.target).parents();
if ($p.is('.app')){
return false; // HERE
} else {
close();
}
});
这不会对 'not do anything' 总是/任何时候您单击主体说吗？
评论出来看看。 （总的来说，这似乎也太复杂了）
我有这些电影，点击电影时会出现浮动 div。
在此浮动 div 中，我需要在 div 打开时将 link 放入视频/预告片中。我放入 div 中的任何 link 在单击时都不起作用。 Chrome 甚至在将鼠标悬停在 link 上时显示 link，但单击它什么也没做。
浮动 div 之外的任何 link 都可以正常工作。
我该如何解决这个问题？
请使用 运行 代码检查此演示。谢谢。
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="app">
<h3>Most Popular Movies</h3>
<section class="movies">
<div class="movie">
<img src="https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_.jpg" alt="" class="poster" />
<div class="title">Avengers: Endgame</div>
<div class="info">
<span class="length">182 min</span>
<span class="year">2019</span>
</div>
<div class="desc">
Adrift in space with no food or water, Tony Stark sends a message to Pepper Potts as his oxygen supply starts to dwindle. Meanwhile, the remaining Avengers Thor, Black Widow, Captain America and Bruce Banner must figure out a way to bring back their vanquished allies for an epic showdown with Thanos the evil demigod who decimated the planet and the universe.
<br>
<a target="_blank" class="info-btn color small" href="https://www.youtube.com/watch?v=TcMBFSGVi1c"><i class="fas fa-info-circle"></i> Play Trailer</a>
<div>
</div>
<a class="popup-youtube" href="https://www.youtube.com/watch?v=TcMBFSGVi1c">Popup</a>
</div>
</div>
<div class="movie">
<img src="https://m.media-amazon.com/images/M/MV5BMjU0NDk0N2EtNTliZS00MjNmLTk0M2MtYTMzOTUxMGQwZWI3XkEyXkFqcGdeQXVyMzE0MTQ2NzQ@._V1_.jpg" alt="" class="poster" />
<div class="title">Top End Wedding</div>
<div class="info">
<span class="length">113 min</span>
<span class="year">2019</span>
</div>
<div class="desc">
Lauren and Ned have 10 days to find Lauren's mother who has gone AWOL in the remote far north of Australia so that they can reunite her parents and pull off their dream wedding.
<a target="_blank" class="info-btn color small" href="https://www.dolby.com/us/en/cinema"><i class="fas fa-info-circle"></i> Play Trailer</a>
</div>
</div>
<div class="movie">
<img src="https://cineprog.de/images/Breite_400px_RGB/p_77672.jpg" alt="" class="poster" />
<div class="title">Dumbo</div>
<div class="info">
<span class="length">112 min</span>
<span class="year">2019</span>
</div>
<div class="desc">
Struggling circus owner Max Medici enlists a former star and his two children to care for Dumbo, a baby elephant born with oversized ears. When the family discovers that the animal can fly, it soon becomes the main attraction bringing in huge audiences and revitalizing the run-down circus. The elephant's magical ability also draws the attention of V.A. Vandevere, an entrepreneur who wants to showcase Dumbo in his latest, larger-than-life entertainment venture.
<a target="_blank" class="info-btn color small" href="https://www.dolby.com/us/en/cinema"><i class="fas fa-info-circle"></i> Play Trailer</a>
</div>
</div>
<div class="movie">
<img src="https://m.media-amazon.com/images/M/MV5BODVjZThlMzMtZjQwNy00YjRlLWE5ZTMtMWVlMWUwM2U1NjRkXkEyXkFqcGdeQXVyODcyODY1Mzg@._V1_UY1200_CR90,0,630,1200_AL_.jpg" alt="" class="poster" />
<div class="title">The Happy Prince</div>
<div class="info">
<span class="length">105 min</span>
<span class="year">2018</span>
</div>
<div class="desc">
His body ailing, Oscar Wilde lives out his last days in exile, observing the difficulties and failures surrounding him with ironic detachment, humour, and the wit that defined his life.
<a target="_blank" class="info-btn color small" href="https://www.dolby.com/us/en/cinema"><i class="fas fa-info-circle"></i> Play Trailer</a>
</div>
</div>
</section>
<div class="detail">
<svg class="close">
<use xlink:href="#close"></use>
</svg>
<div class="movie">
<img src="https://github.com/supahfunk/supah-codepen/blob/master/movie-room.jpg?raw=true" alt="" class="poster" />
<div class="title">Room</div>
<div class="info">
<span class="length">117 min</span>
<span class="year">2015</span>
</div>
<div class="desc">
Jack is a young boy of 5 years old who has lived all his life in one room. He believes everything within it are the only real things in the world. But what will happen when his Ma suddenly tells him that there are other things outside of Room?
<a target="_blank" class="info-btn color small" href="https://www.dolby.com/us/en/cinema"><i class="fas fa-info-circle"></i> Play Trailer</a>
</div>
</div>
</div>
</div>
<a class="popup-youtube" href="https://www.youtube.com/watch?v=TcMBFSGVi1c">Trailer Popup</a>
</div>
CSS
/*Card APP*/
/*-------------------- Body --------------------*/
*, *::before, *::after {
box-sizing: border-box;
}
/*-------------------- App --------------------*/
.app {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vw;
height: 390px;
background: #fff;
border-radius: 15px;
box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
}
.app h3 {
color: #525661;
font-size: 17px;
box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.1);
padding: 20px 28px 0;
margin: -6px 0 0 0;
}
/*-------------------- Movies --------------------*/
.movies {
display: flex;
padding: 8px 18px;
}
.movies .movie {
padding-right:10%;
cursor: pointer;
}
.movies .movie .poster {
width:11vw;
margin-bottom: 6px;
border-radius: 4px;
}
.movies .movie .poster.active {
opacity: 0;
}
.movies .movie .title {
color: #525661;
margin-bottom: 4px;
font-size: 16px;
}
.movies .movie .info {
font-size: .95vmax;
opacity: 0.8;
color: #8b9095;
font-family: 'Roboto', sans-serif;
}
.movies .movie .desc {
display: none;
}
/*-------------------- Detail --------------------*/
.detail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
padding: 37px 30px 30px 255px;
display: none;
}
.detail::before {
content: '';
background: #fff;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 15px;
opacity: 0;
transition: all 0.4s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}
.detail .close {
position: absolute;
top: 21px;
right: 22px;
width: 12px;
height: 12px;
cursor: pointer;
border: 6px solid #fff;
box-sizing: content-box;
z-index: 10;
}
.detail .poster {
position: absolute;
z-index: 2;
top: -10%;
left: -6%;
height: 100%;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
transition: all 0.5s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}
.detail .title, .detail .info, .detail .desc, .detail .play, .detail .close {
transform: translateX(-50px);
opacity: 0;
transition: all 0.4s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}
.detail .close {
transform: translateX(10px);
}
.detail .title {
font-size: 3vmax;;
font-weight: 300;
color: #525661;
margin-bottom: 5px;
}
.detail .info {
font-size: .95vmax;
opacity: 0;
margin-left: 2px;
color: #8b9095;
font-family: 'Roboto', sans-serif;
}
.detail .desc {
text-align: left;
margin-top: 30px;
font-size: 1.25vmax;
line-height: 1.6;
text-align: left;
color: #8b9095;
font-family: 'Roboto', sans-serif;
}
.detail .play {
background: linear-gradient(90deg, #e4761f, #ff8b32);
border: none;
border-radius: 20px;
color: #fff;
font-size: 12px;
line-height: 1.5;
padding: 8px 17px;
margin: 30px 0 0 -2px;
text-transform: uppercase;
z-index: 10;
outline: none !important;
cursor: pointer;
opacity: 0;
}
.detail .play svg {
vertical-align: middle;
position: relative;
top: -2px;
margin-right: 3px;
}
.detail.ready::before {
opacity: 1;
}
.detail.ready .info {
opacity: 0.8;
}
.detail.ready .poster {
opacity: 1;
transition-duration: 0.5s;
}
.detail.ready .title, .detail.ready .info, .detail.ready .desc, .detail.ready .play, .detail.ready .close {
transform: translateX(0);
opacity: 1;
transition-delay: 0s;
transition-duration: 0.5s;
}
.detail.ready .title {
transition-delay: 0.2s;
}
.detail.ready .info {
transition-delay: 0.3s;
}
.detail.ready .desc {
transition-delay: 0.4s;
}
.detail.ready .play {
transition-delay: 0.5s;
}
.the-most {
position: fixed;
z-index: 1;
bottom: 0;
left: 0;
width: 50vw;
max-width: 200px;
padding: 10px;
}
.the-most img {
max-width: 100%;
}
JS
var $play = $('.play'),
$detail = $('.detail'),
$movie = $('.movie', $detail),
$close = $('.close');
$('.movies .movie').click(function(){
$movie.html($(this).html());
$play.appendTo($movie);
$poster = $('.poster', this).addClass('active');
$('.poster', $detail).css({
top: $poster.position().top,
left: $poster.position().left,
width: $poster.width(),
height: $poster.height()
}).data({
top: $poster.position().top,
left: $poster.position().left,
width: $poster.width(),
height: $poster.height()
})
$detail.show();
$('.poster', $detail).delay(10).queue(function(next) {
$detail.addClass('ready');
next();
}).delay(100).queue(function(next){
$(this).css({
top: '-10%',
left: '-6%',
width: 266,
height: 400
});
next();
})
})
/*--------------------
Close
--------------------*/
function close(){
console.log('asd');
$p = $('.detail .poster');
console.log($p)
$p.css({
top: $p.data('top'),
left: $p.data('left'),
width: $p.data('width'),
height: $p.data('height'),
})
$detail.removeClass('ready').delay(500).queue(function(next){
$(this).hide();
$poster.removeClass('active');
next();
});
}
$close.click(close);
$('body').click(function(e){
$p = $(e.target).parents();
if ($p.is('.app')){
return false;
} else {
close();
}
})
/*--------------------
Thumbnail preview
--------------------*/
setTimeout(function(){
$('.movie:eq(0)').click();
}, 300);
setTimeout(function(){
close();
},1700);
//popup trailer
$(document).ready(function() {
$('.popup-youtube').magnificPopup({
type: 'iframe'
});
});
//---------------Mobile--------------
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
在正文点击时监听并返回 false 不是一个好习惯。 用下面的代码替换您的代码以使其工作
$('body').click(function(e){
$p = $(e.target).parents();
if ($p.is('.app')){
if ($(e.target).hasClass('info-btn')) {
return true
}
else {
return false;
}
} else {
close();
}
})
我认为这与此有关：
$('body').click(function(e){
$p = $(e.target).parents();
if ($p.is('.app')){
return false; // HERE
} else {
close();
}
});
这不会对 'not do anything' 总是/任何时候您单击主体说吗？
评论出来看看。 （总的来说，这似乎也太复杂了）