1

Ребят, есть модальное окно в нем миниатюры. Как сделать так , чтобы при клике на миниатюры всплывал поверх миниатюр popup окно. Для каждой миниатюры свое popup окно. Как это реализовать помогите пожалуйста. Вот ссылка - зайдите на второй таб Collection чтобы увидеть эту галерею.

Js

var tabsLink = document.querySelectorAll('.nav-tabs a'),
    tabsElement = document.querySelectorAll('.tab-pane'),
    i;

tabsElement[0].classList.add('tab-open');

var showTabs = function(e) {
    e.preventDefault();
    var targetElement = document.querySelectorAll(this.getAttribute('href'));
    for (i = 0; i < targetElement.length; i++) {
        if (targetElement[i].classList.contains('tab-open')) {
            return false;
        } else targetElement[i].classList.add('tab-open');
    }
    //---- добавлено
    targetElement = document.querySelectorAll(".tab-pane.tab-open:not("+ this.getAttribute('href')+")");
    for (i = 0; i < targetElement.length; i++) {
        targetElement[i].classList.remove('tab-open');
    }
    //----
};

for (i = 0; i < tabsLink.length; i++) {
    tabsLink[i].addEventListener('click', showTabs);
}

CSS

    #collections{
    width:812px;
    height: 1179px;
    overflow: auto ;
}

.inner_col{
    width: 100%;
    height: 100%;
    bottom: 0;
    top:0;
    right: 0;
    left:0;
    position: absolute;
    background: #FFFFFF;
}
#marksFallCollections {
    width: 100%;
    height: 1180px;
    background: #FFFFFF;
}
#tabs2{
    overflow-y: auto;
    overflow-x: hidden;
}
#tabs2::-webkit-scrollbar{
    display: none;
}

#marksFallCollections .product_grid{
    margin-left: 5px;
    position: relative;
}
#marksFallCollections .product_grid .col-pr{
    position: absolute;
    margin:5px;
    cursor: pointer;
}
#marksFallCollections .product_grid .col-pr:before{
    transition: opacity .5s;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #505354;
}
#marksFallCollections .product_grid .col-pr:hover:before{
    opacity: .75;
}
#marksFallCollections .product_grid .col-pr:after{
    transition: opacity .5s;
    content: '';
    position: absolute;
    width: 49px;
    height: 49px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/collection_more_icon.png?ac=1506976312");
    opacity: 0;
    top:50%;
    left:50%;
    margin:-25px;
}
#marksFallCollections .product_grid .col-pr:hover:after{
    opacity: 1;
}
#marksFallCollections .product_grid .col-pr-1{
    width: 366px;
    height: 295px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_1.jpg?ac=1506976312");
    top:0;
    display: block;
}

#marksFallCollections .product_grid .col-pr-2{
    display: block;
    top:0;
    left:372px;
    width: 223px;
    height: 287px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_2.jpg?ac=1506976312");
}
#marksFallCollections .product_grid .col-pr-3{
    display: block;
    left:600px;
    width: 160px;
    height: 119px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_3.jpg?ac=1506976312");
}
#marksFallCollections .product_grid .col-pr-4{
    display: block;
    left:600px;
    top:125px;
    width: 160px;
    height: 162px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_4.jpg?ac=1506976312");

}
#marksFallCollections .product_grid .col-pr-5{
    display: block;
    top:301px;
    left:0;
    width: 222px;
    height: 143px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_5.jpg?ac=1506976312");
}

Html

<div id="tab_frames" class="tab-frames">
<div class="tab-pane" id="tabs2">
    <div class="inner_col">
        <div id="Collections">
            <div id="marksFallCollections" style="position: relative">
                <div class="product_grid">
                    <div class="col-pr col-pr-1" data-pos="1"></div>
                    <div class="col-pr col-pr-2" data-pos="2"></div>
                    <div class="col-pr col-pr-3" data-pos="3"></div>
                    <div class="col-pr col-pr-4" data-pos="4"></div>
                    <div class="col-pr col-pr-5" data-pos="5"></div>
                    <div class="col-pr col-pr-6" data-pos="6"></div>
                    <div class="col-pr col-pr-7" data-pos="7"></div>
                    <div class="col-pr col-pr-8" data-pos="8"></div>
                    <div class="col-pr col-pr-9" data-pos="9"></div>
                    <div class="col-pr col-pr-10" data-pos="10"></div>
                    <div class="col-pr col-pr-11" data-pos="11"></div>
                    <div class="col-pr col-pr-12" data-pos="12"></div>
                    <div class="col-pr col-pr-13" data-pos="13"></div>
                    <div class="col-pr col-pr-14" data-pos="14"></div>
                    <div class="col-pr col-pr-15" data-pos="15"></div>
                    <div class="col-pr col-pr-16" data-pos="16"></div>
                </div>
                <div class="scroller-bar"></div>
            </div>
        </div>
    </div>
</div>

1 ответ 1

2

Добавьте внутрь <div class="col-pr col-pr-1" data-pos="1"></div> с соответствующим содержимым:

<div class="col-pr col-pr-1" data-pos="1">
  <div class='modal-for-photo'>
    <p>It's Me! Mario!</p>
  </div>
</div>

С помощью стилей делаем блок модальным, но до поры скрытым

   .modal-for-photo{
      display: none;
      width: 300px;
      height: 100px;
      background: #fff;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 100;
    }

Функция для отображения

var show_modal = function(event){
 var photo_elem = event.target.getElementsByClassName('modal-for-photo')[0];
 photo_elem.style.display = 'block';
}

Добавьте фон и закрывающую кнопку с функцией, в которой происходит photo_elem.style.display = 'none';, чтобы закрывать окно

https://jsfiddle.net/qx4bxf2d/3/

Версия с фоном. modal-for-photo теперь просто блок, отвечающий за отображение. modal-body - само модальное окно, а modal-background - фон позади окна

<div class='modal-for-photo'>
      <div class='modal-background'></div>
      <div class='modal-body'>
        <p>It's Me! Mario! #2</p>
      </div>
 </div>

https://jsfiddle.net/qx4bxf2d/5/

P.S. Модальное окно поверх другого модального окна - это не лучший вариант

8
  • а есть мнение сделать по другому ?
    – Anton
    30 окт 2017 в 6:49
  • и почему не работает к остальным миниатюрам ? открывает только первые две миниатюры
    – Anton
    30 окт 2017 в 8:30
  • Скрывать родителя, делать непрозрачный фон, использовать тоже окно для просмотра...это чисто для комфорта пользователя
    – Kain
    30 окт 2017 в 8:31
  • Я добавил блоки modal-for-photo только для первых двух
    – Kain
    30 окт 2017 в 8:32
  • вот ваш вариант больше подходит мне , как это реализовать ?если не сложно конечно
    – Anton
    30 окт 2017 в 8:34

Ваш ответ

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

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