0

Помогите, сделать чтобы при загрузке второго блок не было видно - div class="tabs__content active_tab

а при нажатии подробнее, появлялось модальное окно с ним - 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>

1
  • я так понимаю, что мне нужно написать php скрипт, который вызывается при нажатии подробнее, что бы он вставлял нужный мне html, но как модальным его в то же время сделать не пойму
    – spectre_it
    17 авг 2017 в 12:43

1 ответ 1

1

Зачем вам тут php? Разместите .tabs__content.active_tab по середине экрана, привяжите к экрану и сделайте его display:none;. При нажатии на "Подробнее":

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

Потом при нажатии вне $('.tabs__content') - скрываем.

2
  • привяжите к экрану - это что значит ?
    – spectre_it
    18 авг 2017 в 4:06
  • 1
    position: fixed; 18 авг 2017 в 4:30

Ваш ответ

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

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