Jump to content

Как сделать так,чтобы два всплывающих окна перекрывали друг друга при активности?


Recommended Posts

Есть адаптивное меню .mobmenu и кнопка обратной связи .feedback.openform. Как сделать так,чтобы при нажатии на гамбургер, меню с темным задним фоном перекрывало кнопку обратной связи,чтобы ее нельзя было нажать? И наоборот,при нажатии на форму обратной связи,нельзя было вызвать адаптивное меню. С меню вроде как я справился,но вот как полностью вывести фидбэк на передний план и чтобы при этом чтобы header с гамбургером отошли назад?  https://codepen.io/tempest2708/pen/dyMVoOp

623ap.jpg

Nwo5X.jpg

Link to post
Share on other sites
  • 2 weeks later...

Не до конца тебя понял, но подобное меню делал недавно клиенту

Вот ссылка, может что полезное будет, https://profimassage.ru/.


"Как сделать так,чтобы при нажатии на гамбургер, меню с темным задним фоном перекрывало кнопку обратной связи" - это вроде как z-index решает.
 

"И наоборот,при нажатии на форму обратной связи,нельзя было вызвать адаптивное меню"

const callBackForm = document.querySelector('класс, или что то по чему ты находишь форму'),

          gamburger = document.querySelector('нашел свое меню');


If(callBackForm.classList.contains('класс который добавляется при окрытии'){

блокируешь свое меню

}

метод contains - проверяет есть ли такой класс у элемента или открыта ли форма в данный момент;

Что то такое

 

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • By minvareg
      Добрый день!
      Как сделать наследование при описании класса? Именно при описании, а не родитель -дочерний элемент.
      Т.е. есть div.Class1 {тут куча всего}
      Этот класс не используется напрямую, но от него наследуются два класса, т.е. должно получится
      div.Class2 {border: 1px solid red;} + то, что я определил в Class1 
      div.Class3 {border: 1px solid black;} + то, что я определил в Class1
      Т.е. Class 1 сделан чтоб просто чтоб не дублировать одно и тоже при описании Class2 и Class3
      Надеюсь, суть вопроса ясна 🙂
      Спасибо
    • By РоманФ
      Выполняю рабочий проект для заказчика
      Встал вопрос как сверстать секцию о нас(будет правильней чтобы верстка не поехала), так как она наслаивается на верхнюю секцию, плюс полупрозрачный border, плюс под ним еще и картинка 
      И как совместить картинки с задними блоками на секции Продукция

      И еще такой момент, сталкивались ли вы с тем что картинки-исходники разного размера в исходниках, допустим в секции продукция картинка листовок сплющена, если сталкивались может быть подскажите как решать такие моменты.

      Буду рад конструктивным советам, спасибо
       
      Прикладываю макет 
      https://www.figma.com/file/NpCXMgs0oIjLYfuiqzPTJ4/Типография?node-id=11%3A2
    • By Full-R
      В общем свежая безумная идея сделать интерфейс на VPU(view port units) таким образом чтобы избежать media queries.
      Сейчас сделано определение мобильной версии браузера и на CSS4 vars сделаны переключатели масштаба элементов интерфейса.
      Поскольку дизайн полностью масштабируется под размер окна и не нужны ни какие костыли и сетки, я хочу добавить в свой фреймворк такую опцию, как автоматическая генерация Android приложения, которое бы работало на Web View. У нас уже везде webkit и можно было бы сделать заготовку приложения, которая бы скрывала строку ввода адреса браузера, но оставляла возможность поменять URL, на который обращается приложение.
      Я не пишу под андроид и мне бы очень не помешал пример такого приложения с возможностью на сервере через PHP поменять иконку и URL.
      Интерфейс у меня написан полностью динамический на ECMA Script fetch и вместе с SVG графикой весит примерно 300Кб не сжатого сервером кода, что гораздо лучше, чем разрабатывать отдельное приложение для mobile web.
      Мой проект RevolveR CMF: https://revolvercmf.ru/ (сайт сообщества, на котором пока ни чего нет - просто чтобы протестировать интерфейс на VPU и SPAx).
      Видео обзор системы: 
       
       
      Дистрибутив для установки вот здесь: https://github.com/Full-Rx/RevolveR-framework/releases/tag/1.9.2.x
      Группа на facebook тут: https://www.facebook.com/groups/331465761595917
      Фреймворк позиционируется, как замена Drupal и предоставляет широкий спектр функций для создания сайта сообщества.
      Интерфейс написан самостоятельный с чистого листа на ECMA Script 7, а backend реализован на PHP SPL 7.4. Для базы данных реализован мощный кэш с шифрованием и система оптимизирована под высокие нагрузки.
      Сам интерфейс легко меняется с помощью CSS, что позволяет не сильно модифицировать шаблон при создании своей темы оформления.
      Хочу подсказать как лучше реализовать View Port Unit интерфейс, который сейчас работает через calc просто подменяя значение переменной для масштабирования элементов под мобильные устройства. Дело в том, что сейчас уже не нужны ни какие media queries и grids(сетки), а также нет нужды во flex-box так как VPU прекрасно позволяют реализовывать интерфейс для любых дисплеев так, что он смотрится одинокого, как это сделано в операционной системе Windows, например.
       
      Давайте покумекаем, как мы можем это использовать для современных интерфейсов, чтобы сэкономить себе время на создание верстки и дизайна. Мне кажется моя идея выгорает хотя бы экономией времени и денег на создании мобильного приложения. 
       
  • Member Statistics

    46,971
    Total Members
    1,451
    Most Online
    Morwinus
    Newest Member
    Morwinus
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • Первые шаги в облаке: наглядная инструкция по работе на виртуальном сервере Друзья, привет. Нередко сразу после перехода в облако возникают вопросы: как осуществить основные настройки на сервере и работать непосредственно с самой виртуальной машиной и панелью управления сервером? Мы подготовили пошаговую наглядную инструкцию для простого и понятного старта работы с виртуальной машиной https://tucha.ua/ru/blog/support/pervye-shagi-v-oblake-naglyadnaya-instrukciya-po-rabote-na-virtualnom-servere. Из статьи вы узнаете о том, как: ·       получить реквизиты доступа к машине; ·       подключиться к серверу; ·       изменить пароль; ·       установить обновления; ·       распределить дисковое пространство и о других полезных возможностях, которые помогут грамотно использовать сервер для насущных потребностей бизнеса. Инструкция пригодится, если вы только начали или вскоре планируете работу в облаках. Пользуйтесь! А если возникнут дополнительные вопросы или нужна наша помощь, обращайтесь: пишите на почту sales@tucha.ua или звоните по телефону +380 44 583-5-583. Мы на связи 24×7!      
    • Спасибо конечно но мне дешевле сделали. Скопировали + настроили заявки + установили панель управления. Счетчик метрики поставили бесплатно. Правда я и сам бы смог поставить счетчик это же минутное дело.  
    • Давненько от нас не было интересных новостей, поэтому возвращаемся с интересной акцией! 🙂 При заказе VPS сервера в период с 24 по 30 октября получайте скидку 50% на заказ услуг:  Сингл Мастер - 2Gb RAM, 20GB SSD, 2 vCore - цена по скидке 299 руб. Тим Спирит - 4Gb RAM, 40GB SSD, 3 vCore - цена по скидке 595 руб. Суприм Мастер - 6Gb RAM, 40GB SSD, 4 vCore - цена по скидке 895 руб. Black Titan - 8Gb RAM, 60GB SSD, 5 vCore - цена по скидке 1270 руб. Silver Oversun - 12Gb RAM, 80GB SSD, 6 vCore - цена по скидке 1795 руб. Gold Reserve - 16Gb RAM, 100GB SSD, 7 vCore - цена по скидке 2270 руб. Only Platinum - 32Gb RAM, 120GB SSD, 8 vCore - цена по скидке 3395 руб. ...и все его дополнения: дополнительный объем SSD/SAS, CPU, RAM, IP-адреса! Скидка 50% действует на аренду сервера на первые 3-х месяца, далее по обычной цене.   Промо-код: TMXJOS5 Все VPS сервера размещаются на SSD накопителях и процессорах Intel Xeon E5-2695v2. Дата-центр Санкт-Петербург. Добро пожаловать в SerfStack.com!
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...