Question

我目前正在构建一种图像选择，并希望在单击图像上的放大镜图标时弹出一个模式，显示整个图片，标题和描述。我有一个问题，我的所有信息都是使用Sheetrock.js从Google表格中提取的，并且有一个带有Handlebars.js的模板。

// Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1it6QkBRPDsIqYOtr_UbFFmHBEADVkKaKjdghLSX5d3E/edit#gid=0';

// Compile Handlebars template for team RBI leaders.
var RBITemplate = Handlebars.compile($('#team-rbi-template').html());

// Load top five team RBI leaders.
$('#image-grid').sheetrock({
  url: mySpreadsheet,
  rowHandler: RBITemplate
});

我的概念有点工作，除非我打电话给{{cells.ImageURL}}它只想在弹出窗口中显示第一张图片（单元格）。哪个没有意义，因为它只显示#image-grid容器中页面加载的所有查询。我希望模态在右上角有一个x按钮，同时点击全屏模式将关闭它。

以下是我为制作模态而构建的内容：

HTML

<div class="modal">
  <div class="overlay"></div>
  <div class="modal__contents modal--transition">
    <a class="modal__close" href="#">X</a>
    <img src="{{cells.ImageURL}}">
  </div>
</div>

Javascript（jQuery）

$(document).on('click', "a.btn", function() {
  $('.modal').toggleClass('modal--show');
      });

$(document).on('click', '.overlay', function() {
  $('.modal').toggleClass('modal--show');
});

$(document).on('click', '.modal__close', function() {
  $('.modal').toggleClass('modal--show');
});

CSS

.overlay {
    background: rgba(0,0,0,.5);
    position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal {
  visibility: hidden;
}

.modal__contents {
  background: white;
  width: 32rem;
  position: absolute;
  left: 50%;
  margin-left: -16rem;
  top: 6rem;
  min-height: 32rem;
}

.modal__contents h1 {
  margin: 0;
  padding: 0;
  line-height: 32rem;
  text-align: center;
  display: block;
}

.modal__close {
  position: absolute;
  right: 2rem;
  top: 2rem;
  text-decoration: none;
  display: none;
}

.modal--show {
  visibility: visible;
    width: 100%;
    position: absolute !important;
    z-index: 50;
    opacity: 1;
    height: 100%;
}

.modal--transition {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.modal--show .modal--transition {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

我认为抛弃此功能的原因是，handlebar.js模板会生成激活它的按钮，它会被动态复制和制作，并且似乎无法单击被点击的按钮。？

有没有办法可以让它工作，所以它会拉出点击它的同一{{cells.ImageURL}}的{{1}}？

这是一个 JSFiddle 来向您展示我的意思。

Answer 1

$(document).on('click', "a.btn", function() {
     $('.modal img').prop('src', $(this).data('img'));
     $('.modal').toggleClass('modal--show');
});

虽然这意味着每个按钮都需要具有相应图像的data-img=""属性，或者如果图像位于您可以使用的元素中

$(document).on('click', "a.btn", function() {
     $('.modal img').prop('src', $(this).find('img').prop('src'));
     $('.modal').toggleClass('modal--show');
});

使用动态创建的按钮/ div

1 个答案: