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 you have read our privacy policy.

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