我有一个点前面,当它悬停在它上面翻转并显示带有链接的点背面。如果我点击链接,它应该打开一个带有预览图像的模态。 我认为问题出在我最近写的jquery并找到了,但我不知道如何修复它。
import * as loginRouter from './routes/login.router';
private app = express();
this.app.use('/api/v1/auth', loginRouter);
$(function() {
$('.pop').on('click', function() {
console.log("pop");
$('#imagepreview').attr('src', $('#modal-icon01').closest(".div-img").find('.front img').attr('src'));
$('#imagemodal').modal('show');
});
});
.div-img {
display: inline-block;
height: 200px;
width: 200px;
cursor: pointer;
}
.div-img img {
object-fit: cover;
width: 240px;
margin-left: -20px;
}
.div-img span {
display: table-cell;
vertical-align: middle;
height: 200px;
}
.div-img > .front {
position: absolute;
transform: perspective( 600px) rotateY( 0deg);
backface-visibility: hidden;
height: 200px;
width: 200px;
-webkit-transition: transform 0.7s linear;
-moz-transition: transform 0.7s linear;
transition: transform 0.7s linear;
background: #0f1013;
border: solid 1px black;
-moz-box-shadow: 0px 5px 25px rgba(0, 0, 0, 1), inset 0 0px 50px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0px 5px 25px rgba(0, 0, 0, 1), inset 0 0px 50px rgba(0, 0, 0, 1);
box-shadow: 0px 5px 25px rgba(0, 0, 0, 1), inset 0 0px 50px rgba(0, 0, 0, 1);
overflow: hidden;
border-radius: 150px;
}
.div-img > .back {
position: absolute;
transform: perspective( 600px) rotateY( 180deg);
backface-visibility: hidden;
height: 200px;
width: 200px;
-webkit-transition: transform 0.7s linear;
-moz-transition: transform 0.7s linear;
transition: transform 0.7s linear;
background: #0f1013;
border: solid 1px black;
-moz-box-shadow: 0px 5px 25px rgba(0, 0, 0, 1), inset 0 0px 50px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0px 5px 25px rgba(0, 0, 0, 1), inset 0 0px 50px rgba(0, 0, 0, 1);
box-shadow: 0px 5px 25px rgba(0, 0, 0, 1), inset 0 0px 50px rgba(0, 0, 0, 1);
overflow: hidden;
border-radius: 150px;
}
.div-img:hover > .front {
transform: perspective( 600px) rotateY( -180deg);
}
.div-img:hover > .back {
transform: perspective( 600px) rotateY( 0deg);
}
答案 0 :(得分:0)
我没有看到名为modal-icon01
的ID,但根据您的html文件,您可以通过以下方式访问img:
$('.pop').on('click', function() {
console.log("pop");
var image = $(".div-img").find('.front').find('img').attr('src');
$('#imagepreview').attr('src', image);
$('#imagemodal').modal('show');
});
然后别忘了检查你的jquery.js是否在你的脚本之前到达。
希望它会有所帮助。
答案 1 :(得分:0)
首先,您必须添加Jquery
库,然后您必须声明.modal
的含义是什么?
你可以使用快捷方式,只需使用jquery添加bootstrap库,它就可以正常工作,检查这个工作fiddle
已更新附加图片
答案 2 :(得分:0)
这是工作代码。 Bootstrap包括丢失。其次,您的问题中似乎缺少某些HTML,因为我无法找到此ID modal-icon01
。
尝试以下代码并告诉我们:
$('.pop').on('click', function() {
console.log("pop");
$('#imagemodal').modal('show');
});

.div-img {
display: inline-block;
height: 200px;
width: 200px;
cursor: pointer;
}
.div-img img {
object-fit: cover;
width: 240px;
margin-left: -20px;
}
.div-img span {
display: table-cell;
vertical-align: middle;
height: 200px;
}
.div-img>.front {
position: absolute;
transform: perspective( 600px) rotateY( 0deg);
backface-visibility: hidden;
height: 200px;
width: 200px;
-webkit-transition: transform 0.7s linear;
-moz-transition: transform 0.7s linear;
transition: transform 0.7s linear;
background: #0f1013;
border: solid 1px black;
-moz-box-shadow: 0px 5px 25px rgba(0, 0, 0, 1), inset 0 0px 50px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0px 5px 25px rgba(0, 0, 0, 1), inset 0 0px 50px rgba(0, 0, 0, 1);
box-shadow: 0px 5px 25px rgba(0, 0, 0, 1), inset 0 0px 50px rgba(0, 0, 0, 1);
overflow: hidden;
border-radius: 150px;
}
.div-img>.back {
position: absolute;
transform: perspective( 600px) rotateY( 180deg);
backface-visibility: hidden;
height: 200px;
width: 200px;
-webkit-transition: transform 0.7s linear;
-moz-transition: transform 0.7s linear;
transition: transform 0.7s linear;
background: #0f1013;
border: solid 1px black;
-moz-box-shadow: 0px 5px 25px rgba(0, 0, 0, 1), inset 0 0px 50px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0px 5px 25px rgba(0, 0, 0, 1), inset 0 0px 50px rgba(0, 0, 0, 1);
box-shadow: 0px 5px 25px rgba(0, 0, 0, 1), inset 0 0px 50px rgba(0, 0, 0, 1);
overflow: hidden;
border-radius: 150px;
}
.div-img:hover>.front {
transform: perspective( 600px) rotateY( -180deg);
}
.div-img:hover>.back {
transform: perspective( 600px) rotateY( 0deg);
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="div-img">
<div class="back">
<center><span><a class="pop" data-toggle="modal" data-target="#myModal" href="#">Pizza Hut Delivery<br>(De ce Pizza Hut)</a></span></center>
</div>
<div class="front">
<center><img src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;"></center>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" id="imagepreview" style="width: 100%;">
</div>
</div>
</div>
</div>
&#13;
答案 3 :(得分:0)
您错过了JavaScript库文件参考,这是执行点击操作或任何操作最需要的,并且启用bootstrap模型需要bootstrap js。而且你试图找到$('#imagepreview').attr('src', $('#modal-icon01').closest(".div-img").find('.front img').attr('src'));
中找不到的 modal-icon01 ,尝试用这个jquery替换
var imageSrc = $(".div-img").find('.front').find('img').attr('src');
在这里,您通过找到它的父类及其标记来存储图像路径,通过它来覆盖它的src。检查此工作fiddle