Help, make sure that when loading the second block it was not visible - div class = "tabs __ content active_tab

and when you click in more detail, a modal window appears with it - div class = "tabs content active_tab

<div class="tabs__content active_tab"> <div class="tabs__content__wrapper"> <div class="tabs__content_block"> <div class="catalog-new-product">Lorem </div> <div class="catalog-new-price-strikeout">78 900 руб.</div> <div class="catalog-new-price-stock">Цена по акции</div> <div class="catalog-new-price">71 010 руб.</div> <a class="catalog-modal-trigger" href="#request-product-topas200"><img border="0" alt="" src="http://via.placeholder.com/350x150"></a> <a class="catalog-new-btn catalog-modal-trigger" href="#request-product-topas200">Узнать подробнее</a> </div> </div> </div> <br/> <hr/> <br/> <div class="inner_wrap_catalog_new"> <div class="h1">Lorem</div> <div class="card_catalog_new"> <div class="cardMain_catalog_new"><img src="http://via.placeholder.com/350x150" alt=""></div> <div class="cardTech_catalog_new"> <div class="price_catalog_new"> <table> <tbody> <tr> <td width="50%">Lorem</td> <td width="50%"><span class="shock_catalog_new">Lorem</span></td> </tr> <tr> <td class="newPrice_catalog_retail">0000 </td> <td class="newPrice_catalog_newTd">Lorem</td> </tr> </tbody> </table> </div> <table cellspacing="0" cellpadding="0" class="params_catalog_new"> <tbody> <tr> <td>Lorem</td> <td>4</td> </tr> </tbody> </table> </div> </div> <div class="inner-text_catalog_new"> <p>Lorem <p> </div> <div class="links"> <div class="links-inner"> <a class="catalog-modal-trigger current" href="#"><span>Lorem</span> (00000 руб.)</a> <a class="catalog-modal-trigger" href="#"><span>Lorem</span> (00000 руб.)</a> </div> </div> <h3>Lorem</h3> <form method="post" action="#" onsubmit="return false;"> <input type="text" name="name" placeholder="Введите Ваше Имя" title="Имя" maxlength="50"> <input type="tel" name="phone" placeholder="Введите телефон" title="Номер телефона" pattern="(\+?\d[- .()]*){7,18}" maxlength="18"> <input type="hidden" name="formname" value=""> <input type="hidden" name="septic" value=""> <input type="hidden" name="ref" value=""> <input type="hidden" name="ref_info" value=""> <input type="hidden" name="lpm_ref_info" value=""> <button>Lorem</button> </form> </div>

  • I understand that I need to write a php script, which is called when I click in more detail, so that he inserts the html I need, but I don’t understand how to modal it at the same time - spectre_it

1 answer 1

Why do you need php here? Place .tabs__content.active_tab in the middle of the screen, tie it to the screen and make it display:none; . When you click on "Details":

 $('.tabs__content').show();

Then when you click out $('.tabs__content') - hide.

  • Tie to the screen - what does that mean? - spectre_it
  • one
    position: fixed; - Alexey Niemtsov