Question

我有一个点前面，当它悬停在它上面翻转并显示带有链接的点背面。如果我点击链接，它应该打开一个带有预览图像的模态。我认为问题出在我最近写的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);
}

Answer 1

我没有看到名为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是否在你的脚本之前到达。

希望它会有所帮助。

Answer 2

首先，您必须添加Jquery库，然后您必须声明.modal的含义是什么？你可以使用快捷方式，只需使用jquery添加bootstrap库，它就可以正常工作，检查这个工作fiddle

已更新附加图片

Answer 3

这是工作代码。 Bootstrap包括丢失。其次，您的问题中似乎缺少某些HTML，因为我无法找到此ID modal-icon01。

尝试以下代码并告诉我们：

＆＃13;

$('.pop').on('click', function() {
  console.log("pop");
  $('#imagemodal').modal('show');
});

＆＃13;

.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);
}

＆＃13;

<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">&times;</span><span class="sr-only">Close</span></button>
        <img src="" id="imagepreview" style="width: 100%;">
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 4

您错过了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

以模态打开图像（链接在另一个div img中）

4 个答案: