Реактивный компонент плитки открывает ссылку только после среднего щелчка мышью

Question

Я пытаюсь сделать отдельные плитки для отображения проектов моего портфолио. Но странно то, что я могу только щелкнуть ссылку средней кнопкой мыши, а не левой кнопкой мыши. Есть мысли?

import React, { Component } from 'react';
export default class Porfolio extends Component {
  render() {
    let resumeData = this.props.resumeData;
    return (
      <section id="portfolio">
      <div className="row">
        <div className="twelve columns collapsed">
          <h1>Check Out Some of My Works.</h1>
          <div id="portfolio-wrapper" className="bgrid-quarters s-bgrid-thirds cf">
          {
            resumeData.portfolio && resumeData.portfolio.map((item)=>{
              return(
                <div className="columns portfolio-item">
                  <div className="item-wrap">
                    <a href={item.url}>
                      <img src={`${item.imgurl}`} className="item-img"/>
                      <div className="overlay">
                        <a href={item.url}>
                        <div className="portfolio-item-meta">
                          <h5>{item.name}</h5>
                          <p>{item.description}</p>
                        </div>
                        </a>
                      </div>
                    </a>
                  </div>
                </div>
              )
            })
          }
          </div>
        </div>
      </div>
  </section>
        );
  }
}

Answer 1

привет, если вы говорите о том, что модал не появляется, вы должны выбрать элемент img not a

$('.item-wrap') вместо $('.item-wrap a')

я добавил опцию, чтобы сделать он закрывается при нажатии

$('.item-wrap').magnificPopup({

   type:'inline',
   fixedContentPos: false,closeOnContentClick: true,
   removalDelay: 200,
   showCloseBtn: false,
   mainClass: 'mfp-fade'

});

, и если вы не хотите показывать что-то внутри всплывающего окна и хотите открыть новую страницу, ведущую в репозиторий github, вы должны удалить прослушиватель событий, который перезаписывает ссылку элемент по событию click, поскольку он содержит img и элемент

. Вы можете удалить всплывающий вызов magnifi c

или изменить селектор jq на элемент img, а не на элемент div, содержащий ссылку

или вы можете сделать <a>inside here the div with class .item-wrap</a> я надеюсь, что эта помощь