0

сайт: https://gls-trade.ru код css:

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
    overflow: auto;
    visibility:hidden;
    opacity: 0;
    transition: opacity 0.7s ease-in 0s;
}
.popup {
    top: 10%;
    left: 0;
    right: 0;       
    font-size: 14px;
    margin: auto;
    width: 80%;
    min-width: 200px;
    max-width: 600px;
    position: absolute;
    padding: 15px 20px;
    border: 1px solid #666;
    background-color: #fefefe;
    z-index: 1000;
    border-radius: 10px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
    box-shadow: 0 0px 14px rgba(0, 0, 0, 0.4);
}
.close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    position: absolute;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 130, 230, 0.9);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    cursor: pointer;
    outline: none;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-family:  Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(180, 20, 14, 0.8);
}
#overlay .popup p.zag{margin:20px 0 10px;padding:0 0 6px;color:tomato;font-size:16px;font-weight:bold;border-bottom:1px solid tomato;}
</style>

На главной страничке есть карточки с товаром. 1 карточка: "чековая лент", нажимаем кнопку "подробнее", всплывает окошко с небольшой информацией о чековой ленте. код:

<div class="col_one_third  nobottommargin">
        <div class="feature-box center media-box fbox-bg">
            
            <div class="fbox-media">
                <img class="image_fade" src="<?=get_template_directory_uri()?>/files/ct_block_item_148033_862618_5_image_B6wy6HQS.jpg"></a>
            </div>
            
            <div class="fbox-desc">
                <h3 class="editable block_148033 item item-field_title item-option_704264 item-int_862618">Чековая лента</h3>
            <button onclick="swa()" type="button" class="btn button button-3d editable block_148033 item item-field_button_text item-option_1 item-int_862618 jek">Подробнее</button>   
                <div id="overlay">
  <div class="popup">
    <button class="close" title="Закрыть окно" onclick="swa2()"></button>
    <p class="zag">Чековая лента</p>
    <p>Чековая лента - расходный материал для кассовых аппаратов, факсов, банкоматов, фискальных регистраторов и паркоматов. Для изготовления рулонов термоленты на наших производственных площадках используется сырье известных немецких брендов.

Наша компания готова предложить стандартные размеры чековой ленты:

57мм – 15, 17, 27, 40м

80мм – 45, 58, 80м</p>
  </div>
</div>  
                <script>
var b = document.getElementById('overlay');
function swa(){
    b.style.visibility = 'visible';
    b.style.opacity = '1';
    b.style.transition = 'all 0.7s ease-out 0s';
}
function swa2(){
    b.style.visibility = 'hidden';
    b.style.opacity = '0';
}
</script>   

            </div>
        </div>
    </div>

2 карточка: "термоэтикетка", нажимаем кнопку "подробнее", выводится информация, все нормально, но только выводится информация о чековой ленте. где изменить, чтобы выводило то, что надо. кода:

<div class="col_one_third  nobottommargin">
        <div class="feature-box center media-box fbox-bg">
            
            <div class="fbox-media">
            <img class="image_fade" src="<?=get_template_directory_uri()?>/files/ct_block_item_148033_1_5_image_8zfyKUYL.jpg"></a>
            </div>
            
            <div class="fbox-desc">
                <h3 class="editable block_148033 item item-field_title item-option_704264 item-int_1">Термоэтикетка</h3>
                
                <!--
                <p><a href="/fotoobektiv-875213" class="btn button button-3d editable block_148033 item item-field_button_text item-option_1 item-int_1" >Подробнее</a></p> -->
                <button onclick="swa1()" type="button" class="btn button button-3d editable block_148033 item item-field_button_text item-option_1 item-int_1 termo">Подробнее</button>     
                 <div id="overlay">
  <div class="popup1"> 
     <button class="close" title="Закрыть окно" onclick="swa3()"></button> 
    <p class="zag1">Термоэтикетка</p>
    <p>Термоэтикетка - расходный материал для кассовых аппаратов, факсов, банкоматов, фискальных регистраторов и паркоматов. Для изготовления рулонов термоленты на наших производственных площадках используется сырье известных немецких брендов.

Наша компания готова предложить стандартные размеры чековой ленты:

57мм – 15, 17, 27, 40м

80мм – 45, 58, 80м </p>
  </div>
</div>  
                <script>
var b = document.getElementById('overlay');
function swa1(){
    b.style.visibility = 'visible';
    b.style.opacity = '1';
    b.style.transition = 'all 0.7s ease-out 0s';
}
function swa3(){
    b.style.visibility = 'hidden';
    b.style.opacity = '0';
}
</script> 

            </div>
        </div>
    </div>

Подскажите, пожалуйста, в какой части кода нужно исправить, чтобы выводило мне нужную информацию?

7
  • Снова вы) Рад снова видеть вас
    – Miha
    14 фев 2022 в 8:55
  • @ПростаMiha, да, это снова я)))привет)) никак не решу свою проблему((
    – MAB
    14 фев 2022 в 9:02
  • дела в том что у вас повторяется один и тот же id для несколько блоков, это вам и мешает, поменяете его для каждого блока. Но посмотрите код ниже, возможно он вам поможет
    – Miha
    14 фев 2022 в 9:20
  • какой именно id? тыкните пальцем меня пожалуйста))
    – MAB
    14 фев 2022 в 9:42
  • id="overlay" вот этот, он у вас повторяется для кождого скрытого блока, я вам ответил подробнее снизу
    – Miha
    14 фев 2022 в 9:48

1 ответ 1

0

Вот что я придумал для вас. Я сказал вам предыдущее разы что у вас id overlay повторяется для каждого класса. Так вот, я сделал маленький код для вас что-бы вы понимали как это сделать.

  function showOverlay(elem){
    elem.parentElement.children[2].classList.toggle("d-flex");
  }

  function hideOverlay(elem){
    elem.parentElement.parentElement.classList.toggle("d-flex");
  }
body{
    width: 100%;
    min-height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  body > div{
    width: 250px;
    height: 350px;
    margin: 25px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .4);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  div p{
    width: 100%;
    text-align: center;
    font-size: 24px;
  }

  .overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    justify-content: center;
    align-items: center;
    display: none;
    background-color: rgba(0, 0, 0, .4);
  }

  .overlay > div{
    background-color: #fff;
    padding: 12px 24px;
  }

  .d-flex{
    display: flex;
  }
<div>
  <p>Text 1</p>
  <button class="btn-info" onclick="showOverlay(this)">Побробнее</button>
  <div class="overlay">
    <div>
      <button class="btn-close-info" onclick="hideOverlay(this)">Close</button>
      <p>Пример текста 1</p>
      <span>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Error dolore, esse, ullam dolores voluptates doloribus. Dolores, atque, pariatur, iure quaerat, ex aperiam saepe suscipit doloremque omnis sit molestiae explicabo quas!s</span>
    </div>
  </div>
</div>
<div>
  <p>Text 2</p>
  <button class="btn-info" onclick="showOverlay(this)">Побробнее</button>
  <div class="overlay">
    <div>
      <button class="btn-close-info" onclick="hideOverlay(this)">Close</button>
      <p>Пример текста 2</p>
      <span>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Error dolore, esse, ullam dolores voluptates doloribus. Dolores, atque, pariatur, iure quaerat, ex aperiam saepe suscipit doloremque omnis sit molestiae explicabo quas!s</span>
    </div>
  </div>
</div>
<div>
  <p>Text 3</p>
  <button class="btn-info" onclick="showOverlay(this)">Побробнее</button>
  <div class="overlay">
    <div>
      <button class="btn-close-info" onclick="hideOverlay(this)">Close</button>
      <p>Пример текста 3</p>
      <span>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Error dolore, esse, ullam dolores voluptates doloribus. Dolores, atque, pariatur, iure quaerat, ex aperiam saepe suscipit doloremque omnis sit molestiae explicabo quas!s</span>
    </div>
  </div>
</div>
<div>
  <p>Text 4</p>
  <button class="btn-info" onclick="showOverlay(this)">Побробнее</button>
  <div class="overlay">
    <div>
      <button class="btn-close-info" onclick="hideOverlay(this)">Close</button>
      <p>Пример текста 4</p>
      <span>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Error dolore, esse, ullam dolores voluptates doloribus. Dolores, atque, pariatur, iure quaerat, ex aperiam saepe suscipit doloremque omnis sit molestiae explicabo quas!s</span>
    </div>
  </div>
</div>

Что-бы решить вашу проблему поменяете id="overlay" на class="overlay", потом создаёте 2 функций javascript, одна для появление и другая для сокрытия.

Вот код javascript

function swa(elem){
  elem.parentElement.parentElement.style.display = "none";
}

   function swa2(elem){
 elem.parentElement.children[2].style.display = "block";
}
И поменяете для кнопок "Подробнее" onclick="swa()" на onclick="swa(this)" а для кнопок закрыть на onclick="swa2(this)" Должно выглядеть вот так

<div class="col_one_third  nobottommargin">
        <div class="feature-box center media-box fbox-bg">
            
            <div class="fbox-media">
                <img class="image_fade" src="<?=get_template_directory_uri()?>/files/ct_block_item_148033_862618_5_image_B6wy6HQS.jpg"></a>
            </div>
            
            <div class="fbox-desc">
                <h3 class="editable block_148033 item item-field_title item-option_704264 item-int_862618">Чековая лента</h3>
            <button onclick="swa(this)" type="button" class="btn button button-3d editable block_148033 item item-field_button_text item-option_1 item-int_862618 jek">Подробнее</button>   
                <div class="overlay">
  <div class="popup">
    <button class="close" title="Закрыть окно" onclick="swa2(this)"></button>
    <p class="zag">Чековая лента</p>
    <p>Чековая лента - расходный материал для кассовых аппаратов, факсов, банкоматов, фискальных регистраторов и паркоматов. Для изготовления рулонов термоленты на наших производственных площадках используется сырье известных немецких брендов.

Наша компания готова предложить стандартные размеры чековой ленты:

57мм – 15, 17, 27, 40м

80мм – 45, 58, 80м</p>
  </div>
</div>  

Ваш ответ

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

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