Форма обратной связи в модальном окне

669

26 ноября 2016, 19:50

Здравствуйте, есть форма обратной связи, которая отображается при размере экрана больше 480px. На мобильных устройствах (размер экранов которых меньше чем 480px) вместо этой формы появляется кнопка при нажатии на которую должна появляться эта же форма для заказа. Подскажете как реализовать? Использую бутстрап и jQuery

Answer 1

В bootstrap нет классов, которые могут изменять контент при разрешении именно в 480px. Поэтому нужно сделать их самому. Сделайте 2 блока, один с кнопкой, другой с формой связи и показывайте их в зависимости от разрешения экрана:

.x-small-show{ 
  display:none; 
} 
 
@media (max-width:480px){ 
  .x-small-show{ 
      display:block; 
  } 
  .x-small-hide{ 
      display:none; 
  } 
 
}

<div class='x-small-hide'>Форма связи</div> 
<div class='x-small-show'>Кнопка вызова формы связи</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Форма обратной связи в модальном окне при нажатии на кнопку

Здравствуйте, есть блок, в котором присутствует форма обратной связи При уменьшении экрана до 480px эта форма скрывает и появляется кнопка...

755

HTML

Почему не работает форма обратной связи?

Вроде по логике всё верно, но не работаетНадеюсь на помощь

377

HTML

При загрузке страница показывает сразу iframe

При загрузке страница показывает сразу iframeЕсть html страница и в ней iframe

339

HTML

Нажатие на элемент, обернутый ссылкой

Как сделать, чтобы при нажатии на <span> срабатывало событие onclick без перехода по ссылке?

310