打开带有图像的新弹出窗口，点击弹出窗口内的链接

Posted 2021-04-15

我有一些代码（使用magnific-popup）：

$('.modal-gallery-link').magnificPopup({
  removalDelay: 500, //delay removal by X to allow out-animation
  callbacks: {
    beforeOpen: function() {
      this.st.mainClass = this.st.el.attr('data-effect');
    },
    open: function () {

    },
  },
  midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
}); 


$(".gallery").magnificPopup({
  delegate: '.gallery-link',
  type: 'image',
  callbacks: {
    beforeOpen: function () {
      
    },
    buildControls: function () {
      this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
    }
  },
  gallery: {
    tCounter: '<span class="mfp-counter">%curr% / %total%</span>',
    enabled: true
  }
});

.modal-gallery-link {
  color: #000;
  display: block;
}

.modal-inner {
  display: flex;
}

.modal-inner a {
  display: block;
  margin: 1rem;
}

img {
  max-width: 100%;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
  
  <a href="#gallery" data-effect="mfp-move-horizontal" class="modal-gallery-link">Open Gallery</a>
  
  <div id="gallery" class="modal mfp-hide">
    <div class="modal-inner gallery">
      <a href="https://images.unsplash.com/photo-1425342605259-25d80e320565?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="gallery-link">
         <img src="https://images.unsplash.com/photo-1425342605259-25d80e320565?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
      </a>
      
      <a href="https://images.unsplash.com/photo-1513010963904-2fefe6a92780?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="gallery-link">
         <img src="https://images.unsplash.com/photo-1513010963904-2fefe6a92780?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
      </a>
    </div>
  </div>

点击modal-gallery-link打开id="gallery" magnific popup。

之后，我点击gallery-link（图像预览），这个弹出窗口必须隐藏并用image打开新的弹出窗口。

但我有错误：

未捕获的错误：语法错误，无法识别的表达式：...

CodePen

问题：如何在点击弹出窗口内的链接后用img打开新的弹出窗口？

答案

我解决了这个问题如下：

var imgs = $('.gallery-link img');
imgs.each(function(){
  var item = $(this).closest('.gallery-link');
  item.css({
      'background-image': 'url(' + $(this).attr('src') + ')', 
      'background-position': 'top center',            
      '-webkit-background-size': 'cover',
      'background-size': 'cover', 
  });
  $(this).addClass('hide');
});

$('.modal-gallery-link').magnificPopup({
  removalDelay: 500,
  callbacks: {
    beforeOpen: function() {
      this.st.mainClass = this.st.el.attr('data-effect');
    },
    open: function () {
      $('.gallery-link').on('click', function(e){
        e.preventDefault();

        console.log(items);

        $.magnificPopup.close();

        setTimeout(function(){
          $.magnificPopup.open({
            items: items,
            type: 'image',
            gallery: {
                enabled: true
            }
          });
        }, 500);
      });
    },
    afterClose: function () {

    },
  },
  midClick: true
}); 

var items = [];
$(".gallery .gallery-link").each(function() {
  items.push( {
    src: $(this).attr("href"),
  } );	  		
});

.modal-gallery-link {
  color: #000;
  display: block;
}

.modal-inner {
  display: flex;
}

.modal-inner a {
  display: block;
  margin: 1rem;
}

.gallery-link {
  display: block;
  width: 300px;
  height: 300px;
}

img {
  max-width: 100%;
}

img.hide {
  width: 0;
  height: 0;
  display: block;
  position: 0;
  margin: 0;
  visibility: hidden;
  opacity: 0;
}

.modal {
    background: #fff;
    max-width: 1131px;
    width: 100%;
    margin: auto;
}

.mfp-close-btn-in .mfp-close {
    color: #fff;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<a href="#gallery" data-effect="mfp-move-horizontal" class="modal-gallery-link">Open Gallery</a>

<div id="gallery" class="modal mfp-hide">
  <div class="modal-inner gallery">
    <a href="https://images.unsplash.com/photo-1425342605259-25d80e320565?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="gallery-link">
        <img src="https://images.unsplash.com/photo-1425342605259-25d80e320565?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
    </a>

    <a href="https://images.unsplash.com/photo-1513010963904-2fefe6a92780?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="gallery-link">
       <img src="https://images.unsplash.com/photo-1513010963904-2fefe6a92780?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
    </a>
  </div>
</div>

以上是关于打开带有图像的新弹出窗口，点击弹出窗口内的链接的主要内容，如果未能解决你的问题，请参考以下文章

JQuery如何实现在弹窗中点击按钮，继续弹出一个新弹窗，而不是打开新页面

用window.open打开的新窗口如何居中弹出

点击链接，弹出窗口是另外一个网页的内容？

谁能帮写一个点击链接自动弹出提示窗口的js代码？

html超链接新窗口打开

中继器内的多个弹出窗口