Таблица размеров в шторке

Ссылка «Таблица размеров», которая открывает шторку снизу со справочной таблицей. Содержимое шторки описывается тут же в блоке — отдельно загружать ничего не нужно. Удобно для одежды и обуви.

Где разместить

HTML-вставка в карточке товара. Встроенные шторки работают в блоках на главном экране, в карточке товара и в историях.

Код

                                HTML                            

                            
<a data-mobius="bottomsheet.open('size-guide')"
   style="display:inline-block;color:#1D8673;text-decoration:underline;cursor:pointer;">
  Таблица размеров
</a>

<bottomsheet id="size-guide" height="70%">
  <div style="padding:16px;">
    <h3 style="margin-top:0;">Таблица размеров</h3>
    <table style="width:100%;border-collapse:collapse;">
      <tr><th style="text-align:left;padding:8px;border-bottom:1px solid #eee;">Размер</th>
          <th style="text-align:left;padding:8px;border-bottom:1px solid #eee;">Обхват груди, см</th></tr>
      <tr><td style="padding:8px;border-bottom:1px solid #eee;">S</td>
          <td style="padding:8px;border-bottom:1px solid #eee;">88–94</td></tr>
      <tr><td style="padding:8px;border-bottom:1px solid #eee;">M</td>
          <td style="padding:8px;border-bottom:1px solid #eee;">95–101</td></tr>
      <tr><td style="padding:8px;border-bottom:1px solid #eee;">L</td>
          <td style="padding:8px;border-bottom:1px solid #eee;">102–108</td></tr>
    </table>
    <p style="color:#7A7A7A;margin-top:12px;">Измеряйте по самой широкой части груди.</p>
  </div>
</bottomsheet>
                        

Как это работает

Тег <bottomsheet> сам по себе не виден на странице — это «контейнер» с содержимым шторки.
Ссылка с data-mobius="bottomsheet.open('size-guide')" открывает шторку с этим содержимым. Значение в скобках — это id контейнера.
Атрибут height="70%" задаёт высоту шторки.

Как адаптировать

Замените содержимое внутри <bottomsheet> на свою таблицу или текст.
id должен совпадать в ссылке и в теге. Если на странице несколько шторок — давайте им разные id.
Для окна на весь экран вместо шторки используйте тег <modal> и команду modal.open:

                                HTML                            

<a data-mobius="modal.open('care')">Уход за изделием</a>

<modal id="care" title="Уход за изделием">
  <div style="padding:16px;">Стирка при 30°. Не отбеливать.</div>
</modal>

Используемые команды

bottomsheet.open — шторка с встроенным содержимым.
modal.open — окно с встроенным содержимым.

Обновлено 10.07.2026 09:36

Помогла ли статья?

Кнопки покупки в описании Документы