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

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