MY SPELE
+380678383535
team@spele.ua

Настройки блока интерфейса

Настройки можно вынести в всплывающее окно или же в разворачивающийся блок. Ниже пример настроек в всплывающем окне с фиксировнными кнопки внизу екрана:

<a class="ob-link-dashed block-element-toggle" href="javascript:void(0);" onclick="return popupOpen('.js-popup-1');">Настройки</a>
<div class="shop-block-popup order-field-popup js-block-element-html js-popup-1" style="display: none;">
  <div class="dark"></div>
  <div class="popupblock">
    <div class="nb-top-nav-place js-top-nav-buffer"></div>
    <div class="nb-top-nav no-left js-top-nav">
      <div class="nb-block-crumbs">
        <div class="crumb-element fl-r">
          <a onclick="return popupClose('.js-popup-1');" class="close" href="javascript:void(0);">
            <svg viewBox="0 0 16 16">
              <use xlink:href="#icon-close"/>
            </svg>
          </a>
        </div>
        <div class="crumb-caption">Настройки</div>
      </div>
      <div class="clear"></div>
    </div>
    <div class="window-form">
      <div class="block-columns-wrapper">
        <div class="column-element">
          Main Content
          <div class="ob-button-fixed">
            <input type="submit" name="send_edit" value="{|$translate_save|}" class="ob-button button-green">
          </div>
          <div class="ob-button-fixed-place"></div>
        </div> <!-- ./column-element -->
        <div class="column-element aside">
          Aside Content
        </div> <!-- ./column-element aside -->
      </div>
    </div>
  </div>
</div>

 

или же в разворачивающемся блоке: 

<a class="ob-link-dashed block-element-toggle js-block-element-toggle" href="javascript:void(0);">Настройки</a>
<div class="js-block-element-html block-element-content mobile-settings-toggler" style="display: none;">
  <div class="option-element">
    <div class="element-name">Element name</div>
    <input type="text" name="name" value="">
  </div>

  <div class="option-element">
    <div class="element-name">Element name</div>
    <input type="text" name="name" value="">
  </div>
</div>