БЛОГ НА HUSL


Одно модальное окно для разных карточек с разным контентом

Автор вопроса: sodepix

Есть одна большая область overflow, где помещены карточки участников, там же есть тэг figure для авотарки, и див контейнер где расположена вся информация карточки. После этого контента, идет ниже кнопка, которая вызывает модальное окно (или же всплывающее окно) с оверлеем. Нужно проделать работу таким образом, чтобы на разных карточках выскальзывало одно и тоже модальное окно, где по нажатию на кнопку с разных карточек менялся контент внутри. p.s: пробую пользоваться этим сайтом впервые, надеюсь на вашу помощь в цели решения моей проблемы.

<div id="modalWin" class="modal">
        <div class="modal-window">
              <div class="author">
                <a href="#0" class="author__img-wrapper">
                        <img src="img/strake87.jpg" alt="Author picture">

                </a>
                <div class="author_text">
                  <h4>Кирилл Олегович</a></h4>
                  <p class="color-contrast-medium">Работает преподавателем и методистом, классный мужчина!</p>
                  <p class="text-sm"><a href="#0">example</a></p>
                </div>
              </div>
              
        <div id="modalWin1" class="modal1">
        <div class="modal-window1">
              <div class="author1">
                <a href="#0" class="author__img-wrapper">
                        <img src="img/webmaster.png" alt="Author picture">

                </a>
                <div class="author_text1">
                  <h4>Илья Шевцов</a></h4>
                  <p class="color-contrast-medium">Программист, верстальщик, пишу сайт для центра</p>
                  <p class="text-sm"><a href="#0">example</a></p>
                </div>
              </div>
            <button class="btn-close" data-easy-toggle="#modalWin" data-easy-class="close">X</button>
        </div>
        <div class="overlay" data-easy-toggle="#modalWin1" data-easy-class="close"></div>
    </div>

    <div class="oflow">
    <div class="raw">
    <div class="column">
      <div class="card">
        <figure>
            <img src="img/rami.jpg" alt="Kirill_Komarov" style="width:100%">
        </figure>
        <div class="container">
          <h2>Кирилл Комаров</h2>
          <p class="title">Преподаватель & Методист</p>
          <p>Работает преподавателем и методистом, классный мужчина!</p>
          <p>[email protected]</p>
          <p><button class="button" data-easy-toggle="#modalWin" data-easy-class="show"><span>Подробнее</span></button></p>
        </div>
      </div>
    </div>

        <div class="column">
          <div class="card">
              <figure>
                <img src="img/strake87.jpg" alt="Kirill_Komarov" style="width:100%">
              </figure>
                <div class="container">
              <h2>Кирилл Комаров</h2>
              <p class="title">Преподаватель & Методист</p>
              <p>Работает преподавателем и методистом, классный мужчина!</p>
              <p>[email protected]</p>
              <p><button class="button" data-easy-toggle="#modalWin" data-easy-class="show"><span>Подробнее</span></button></p>
            </div>
          </div>
        </div>

Это образец карточек из тега overflow Далее код расписанный под теги модального окна из CSS.

.modal{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    z-index: -1;
    opacity: 0;
    transition: all .2s ease-out;
}

.modal.show{
    visibility: visible;
    z-index: 100;
    opacity: 1;
}

.modal .overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.7;
    z-index: 0;
}

.modal-window{
    position: relative;
    z-index: 2;
    width: 550px;
    border-radius: 10px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
    background-color: #ffffff;
    padding: 30px;
    margin-top: -40px;
    transition: inherit;
}

.btn-close{
    position: absolute;
    right: 20px;
    top: 20px;
    border: none;
    color: #383838;
    opacity: 0.2;
    font-size: 20px;
}

.btn-close:hover{
    opacity: 1;
    color: #000;
}

.modal.show .modal-window{
    margin-top: 0;
}


.modal1{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    z-index: -1;
    opacity: 0;
    transition: all .2s ease-out;
}

.modal1.show{
    visibility: visible;
    z-index: 100;
    opacity: 1;
}

.modal1 .overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.7;
    z-index: 0;
}

.modal-window1{
    position: relative;
    z-index: 2;
    width: 550px;
    border-radius: 10px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
    background-color: #ffffff;
    padding: 30px;
    margin-top: -40px;
    transition: inherit;
}

.btn-close{
    position: absolute;
    right: 20px;
    top: 20px;
    border: none;
    color: #383838;
    opacity: 0.2;
    font-size: 20px;
}

.btn-close:hover{
    opacity: 1;
    color: #000;
}

.modal1.show .modal-window1{
    margin-top: 0;
}

:root {
    --author-img-size: 4em;
  }
  
  .author {
    display: grid;
    grid-template-columns: var(--author-img-size) 1fr;
    grid-gap: var(--space-sm);
  }
  
  .author__img-wrapper {
    display: inline-block;
    border-radius: 50%;
    width: var(--author-img-size);
    height: var(--author-img-size);
    overflow: hidden;
    transition: -webkit-transform 0.3s var(--ease-out-back);
    transition: transform 0.3s var(--ease-out-back);
    transition: transform 0.3s var(--ease-out-back), -webkit-transform 0.3s var(--ease-out-back);
  }
  .author__img-wrapper:hover {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  .author__img-wrapper img {
    display: block;
    width: inherit;
    height: inherit;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .author__content a {
    color: inherit;
  }
  .author__content a:hover {
    color: var(--color-primary);
  }
  
  .author--meta {
    --author-img-size: 3em;
    align-items: center;
    grid-gap: var(--space-xs);
  }
  
  .author--minimal {
    --author-img-size: 2.4em;
    align-items: center;
    grid-gap: var(--space-xxs);
  }
  
  .author--featured {
    --author-img-size: 6em;
    grid-template-columns: 1fr;
    justify-content: center;
    text-align: center;
  }
  .author--featured .author__img-wrapper {
    margin-left: auto;
    margin-right: auto;
  }
  
  .author__social {
    --size: 40px;
    width: var(--size);
    height: var(--size);
    display: flex;
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
    border-radius: 50%;
    transition: 0.2s;
  }
  .author__social .icon {
    --size: 16px;
    display: block;
    margin: auto;
    color: var(--color-contrast-higher);
    transition: color 0.2s;
  }
  .author__social:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
  }
  .author__social:hover .icon {
    color: var(--color-primary);
  }

И вот ещё теги по самим карточкам

 html {
    box-sizing: border-box;
  }
  
  *, *:before, *:after {
    box-sizing: inherit;
  }
  
  .raw{
      overflow: hidden;
      margin: auto;
   }

   .oflow{
    overflow: scroll; /* Добавляем полосы прокрутки */
    background-color: #ffffff;
    justify-content: center;
    width: 1280px; /* Ширина блока */
    height: 720px; /* Высота блока */
    /*margin: 0px 30px 0px 30px; /* Поля вокруг текста */
    margin-left: auto;
    margin-right: auto;
    border: solid 1px black; /* Параметры рамки */
    text-align: center;
    display: block;
   }

  .card {
    float: left;
    width: 30%;
    min-height: 150px;
    margin: 5px 10px;
    padding: 12px;
    background-color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 6px 6px 0 #000000;
    justify-content: space-around;
  }
  
  .card img{
      position: left;
  }

/*
  @media screen and (max-width: 650px) {
    .column {
      width: 100%;
      display: block;
      font-size: calc(14px - 4vw);
    }
  }
*/  

@media (min-width: 480px) and (max-width: 1080px) {
    p {
      font-size: calc(14px + (18 - 8) * ( (100vw - 480px) / ( 1080 - 480) ));
    }
  }
  .container {
    padding: 0 16px;
    text-align: center;
    font-weight: bold;
  }
  
  .container::after, .row::after {
    clear: both;
    display: table;
  }
  
  .title {
    color: #424242;
  }
  
  .button {
    background-color: #474747;
    border: none;
    color: #ffffff;
    display: inline-block;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    margin: 4px;
    opacity: 1;
    transition: 0.45s;
    width: 100%;
  }
  
  .button:hover {
    background-color: #000000;
  }


  .button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }
  
  .button span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }
  
  .button:hover span {
    padding-right: 25px;
  }
  
  .button:hover span:after {
    opacity: 1;
    right: 0;
  }
 figure {
    width: 100px;
    height: 100px;
    margin-bottom: 25px;
    float: left;
    background: none; /* Цвет фона */
    padding: 8px; /* Поля */
   }

   figure:first-child {
    margin-left: 0; /* Убираем отступ для первого элемента */
   }

   .head_naprav{
    text-align: center;
    color: #ffffff;
    font-size: auto;
    margin-top: 50px;
}

Источник

Ответы (1 шт):

Автор решения: Александр Сычёв

Для примера упрощенный вариант твоей реализации, остальное сможешь сделать под свои нужды

document.addEventListener('click', function(e) {
            if(e.target.classList.contains("text-sm")) {
                e.preventDefault()
                let divHide = e.target.nextElementSibling
                let divImg = divHide.querySelector('img').src
                let divHeader = divHide.querySelector('h2').textContent
                let divTitle = divHide.querySelector('.title').textContent
                let divEmail = divHide.querySelector('.email').textContent
                
                popapSchow(divImg,divHeader,divTitle,divEmail)
            }
        })

        document.addEventListener('click', function(e) {
            if(e.target.classList.contains("button")) {
                let w  = document.querySelector('.wrapper')
                w.remove()
        }
        })

        function popapSchow(srs,header,title,email) {
            let out = document.getElementById('out')
            let popap = 
            `
            <div class="wrapper">
              <div class="card">
            <figure>
                  <img src="${srs}" alt="${header}" style="width:100%">
            </figure>
            <div class="container">
              <h2>${header}</h2>
              <p class="title">${title}</p>
              <p class="email">${email}</p>
              <p><button class="button" data-easy-toggle="#modalWin" data-easy-class="show">Закрыть</button></p>
            </div>
            </div>
        </div>
            `
            out.insertAdjacentHTML('afterBegin', popap);
        }
        .modal{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
/*    visibility: hidden;
    z-index: -1;
    opacity: 0;*/
    transition: all .2s ease-out;
    }

.modal.show{
    visibility: visible;
    z-index: 100;
    opacity: 1;
}

.modal .overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.7;
    z-index: 0;
}

.modal-window{
    width: 550px;
    border-radius: 10px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
    background-color: #ffffff;
    padding: 30px;
    margin-top: 15px;
    transition: inherit;
}

.btn-close{
    position: absolute;
    right: 20px;
    top: 20px;
    border: none;
    color: #383838;
    opacity: 0.2;
    font-size: 20px;
}

.btn-close:hover{
    opacity: 1;
    color: #000;
}

.modal.show .modal-window{
    margin-top: 0;
}


.modal1{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    z-index: -1;
    opacity: 0;
    transition: all .2s ease-out;
}

.modal1.show{
    visibility: visible;
    z-index: 100;
    opacity: 1;
}

.modal1 .overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.7;
    z-index: 0;
}

.modal-window1{
    position: relative;
    z-index: 2;
    width: 550px;
    border-radius: 10px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
    background-color: #ffffff;
    padding: 30px;
    margin-top: -40px;
    transition: inherit;
}

.btn-close{
    position: absolute;
    right: 20px;
    top: 20px;
    border: none;
    color: #383838;
    opacity: 0.2;
    font-size: 20px;
}

.btn-close:hover{
    opacity: 1;
    color: #000;
}

.modal1.show .modal-window1{
    margin-top: 0;
}

:root {
    --author-img-size: 4em;
  }
  
  .author {
    display: grid;
    grid-template-columns: var(--author-img-size) 1fr;
    grid-gap: var(--space-sm);
  }
  
  .author__img-wrapper {
    display: inline-block;
    border-radius: 50%;
    width: var(--author-img-size);
    height: var(--author-img-size);
    overflow: hidden;
    transition: -webkit-transform 0.3s var(--ease-out-back);
    transition: transform 0.3s var(--ease-out-back);
    transition: transform 0.3s var(--ease-out-back), -webkit-transform 0.3s var(--ease-out-back);
  }
  .author__img-wrapper:hover {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  .author__img-wrapper img {
    display: block;
    width: inherit;
    height: inherit;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .author__content a {
    color: inherit;
  }
  .author__content a:hover {
    color: var(--color-primary);
  }
  
  .author--meta {
    --author-img-size: 3em;
    align-items: center;
    grid-gap: var(--space-xs);
  }
  
  .author--minimal {
    --author-img-size: 2.4em;
    align-items: center;
    grid-gap: var(--space-xxs);
  }
  
  .author--featured {
    --author-img-size: 6em;
    grid-template-columns: 1fr;
    justify-content: center;
    text-align: center;
  }
  .author--featured .author__img-wrapper {
    margin-left: auto;
    margin-right: auto;
  }
  
  .author__social {
    --size: 40px;
    width: var(--size);
    height: var(--size);
    display: flex;
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
    border-radius: 50%;
    transition: 0.2s;
  }
  .author__social .icon {
    --size: 16px;
    display: block;
    margin: auto;
    color: var(--color-contrast-higher);
    transition: color 0.2s;
  }
  .author__social:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
  }
  .author__social:hover .icon {
    color: var(--color-primary);
  }
  html {
    box-sizing: border-box;
  }
  
  *, *:before, *:after {
    box-sizing: inherit;
  }
  
  .raw{
      overflow: hidden;
      margin: auto;
   }

   .oflow{
    overflow: scroll; /* Добавляем полосы прокрутки */
    background-color: #ffffff;
    justify-content: center;
    width: 1280px; /* Ширина блока */
    height: 720px; /* Высота блока */
    /*margin: 0px 30px 0px 30px; /* Поля вокруг текста */
    margin-left: auto;
    margin-right: auto;
    border: solid 1px black; /* Параметры рамки */
    text-align: center;
    display: block;
   }

  .card {
    float: left;
    width: 30%;
    min-height: 150px;
    margin: 5px 10px;
    padding: 12px;
    background-color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 6px 6px 0 #000000;
    justify-content: space-around;
  }
  
  .card img{
      position: left;
  }
  ._hide {
    display: none;
    
  }
<div id="modalWin" class="modal">
    <div class="modal-window">
        <div class="author">
        <a href="#0" class="author__img-wrapper">
          <img src="img/strake87.jpg" alt="Author picture">
        </a>
        <div class="author_text">
          <h4>Кирилл Олегович</a></h4>
          <p class="color-contrast-medium">Работает преподавателем и методистом, классный мужчина!</p>
          <a class="text-sm" href="#0">example</a>
            <div class="_hide">
                    <div class="card">
                        <img src="img/rami.jpg" alt="">
                          <h2>Кирилл Олегович</h2>
                          <p class="title">222222222222</p>
                          <p class="email">[email protected]</p>
                            </div>
                  </div>
                </div>
        </div>
    </div>
  </div>
              
    <div id="modalWin" class="modal">
    <div class="modal-window">
        <div class="author">
        <a href="#0" class="author__img-wrapper">
          <img src="img/strake87.jpg" alt="Author picture">
        </a>
        <div class="author_text">
          <h4>Flex Bern</a></h4>
          <p class="color-contrast-medium">Работает преподавателем и методистом, классный мужчина!</p>
          <a class="text-sm" href="#0">example</a>
            <div class="_hide">
                    <div class="card">
                        <img src="img/rami.jpg" alt="">
                          <h2>Flex Bern</h2>
                          <p class="title">44444444444</p>
                          <p class="email">[email protected]</p>
                            </div>
                  </div>
                </div>
        </div>
    </div>
  </div>

  <div id='out'></div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.