0

Нужно сделать так, чтобы элемент появлялся при клике на картинку в том месте где произведен был клик. А также не знаю как исправить следующее: при клике на одну картинку, сразу во всех появляется элемент, а надо чтобы оно появлялось только на той на которой был произведен клик. Как сделать?

Ссылка на проект: https://plupiks.github.io/Webovio-Full-Landing/

const quote = $('.quote')
const featuresImg = $('.features-block__image')
const windowWidth = $('window').width()
const mediaQuery = window.matchMedia('(max-width: 1200px)')

if (quote.hasClass('quote-disable')) {
  featuresImg.on('click', function(){
    clickPos();
  });
}

function clickPos() {
  featuresImg.on('click', function(e){
    e.stopPropagation();
    x = e.pageX;
    y = e.pageY
  })
}

1 ответ 1

3

Есть вариант проще, появляющиеся блоки с текстами можно так же стилизовать как нужно

$('.features-block__image').click(function(e) {
  var xClick = e.pageX - $(this).offset().left;
  var yClick = e.pageY - $(this).offset().top;
  $(this).next('.fetures-block__quote').css({
    "top": yClick,
    "left": xClick
  }).toggleClass('quote-active');
})
.features-block__left {
  position: relative;
}

.fetures-block__quote {
  position: absolute;
  background: white;
  width: 50%;
  padding: 10px;
  z-index: 1;
}

.quote-disable {
  display: none;
}

.quote-active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="features-block__left">
  <div class="features-block__image" id="features-img">
    <img src="https://i.ibb.co/JB2NWC4/leopard-g5d8314f7f-640.jpg" alt="">
  </div>
  <div class="fetures-block__quote quote quote-disable">
    <div class="quote__wrapper">
      <p class="quote__text">
        “In my history of working with trade show vendors, I can honestly say that there is not one company that I've ever worked with that has better service than Exhibit Systems.”
      </p>
      <div class="quote__about">
        <div class="quote__img"></div>
        <div class="quote__about-inf">
          <h3 class="quote__title">Angel Armstrong</h3>
          <span class="quote__descr">Founder &amp; CEO, Google</span>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="features-block__left">
  <div class="features-block__image" id="features-img">
    <img src="https://i.ibb.co/tBVh7X8/street-g385867f88-640.jpg" alt="">
  </div>
  <div class="fetures-block__quote quote quote-disable">
    <div class="quote__wrapper">
      <p class="quote__text">
        “In my history of working with trade show vendors, I can honestly say that there is not one company that I've ever worked with that has better service than Exhibit Systems.”
      </p>
      <div class="quote__about">
        <div class="quote__img"></div>
        <div class="quote__about-inf">
          <h3 class="quote__title">Angel Armstrong</h3>
          <span class="quote__descr">Founder &amp; CEO, Google</span>
        </div>
      </div>
    </div>
  </div>
</div>

3
  • Спасибо, частично помогли, но надо ещё сделать так, чтобы элемент появлялся на месте клика, а не просто отображался/скрывался)
    – Vitaliy
    17 ноя 2021 в 18:57
  • 1
    @Vitaliy, я дополнил свой ответ, посмотрите, теперь верхний левый угол блока появляется на месте клика
    – SLideR11
    17 ноя 2021 в 22:27
  • Спасибо, очень помогли мне)
    – Vitaliy
    17 ноя 2021 в 23:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.