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

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