ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Адаптивное модальное окно на jQuery

Адаптивное модальное окно на jQuery

Адаптивное модальное окно на jQuery
Иногда на сайте нужно спрятать информацию, где при клике показать, и здесь адаптивное модальное окно на CSS отлично подойдет под этот функционал. Так как оно будет корректно смотреться на мобильных аппаратах, но и на самых больших мониторах, но больше всего, то что модальное окно понятно для пользователя. Это простая дополнительная страница, которую можно на любой страницы скрыть, и вывести кнопку или ключевое слово, где при нажатии его оно появится по центру.

А какой шириной будет, то здесь сам веб мастер задает все значение. Так что в этом материале представлено отличная идея под модальное окно, которое будет иметь оригинальный эффект. Есть бесконечные возможности для перехода от внешнего вида диалогового окна, что все можно совершить, через диалоговые окна, и дать некоторою оригинальность саму интернет ресурсу.

Так реально выглядит дизайн окна при вызове:

Модальное окно CSS на разные тематические сайты

Установка:

В HEAD

Код
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

HTML

Код
<button>Оставить заявку</button>

<div class="gensatuges">
  <div class="ugescomep">
  <div class="kolsmepnes">
  <i class="fa fa-times close" aria-hidden="true"></i>
  <h3>Модальное окно</h3>
  </div>
  </div>
</div>

CSS

Код
button{
  display:block;
  margin:20px auto;
  padding:10px 20px;
  border-radius:10px;
  text-transform:uppercase;
  font-weight: bold;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  cursor: pointer;
  transition: .5s;
}

button:hover{
  background: rgba(0,0,0,0.5);
  border-color: rgba(0,0,0,0.3);
}

.gensatuges{
  display:none;
}

.gensatuges .ugescomep{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.7);
}

.gensatuges .kolsmepnes{
  display:block;
  margin:50px auto;
  width:500px;
  min-height:300px;
  background-color: #fefefe;
  border-radius: 10px;
  padding:20px;
  color: #333333;
  position:relative;
}

.gensatuges .close{
  position:absolute;
  right:20px;
  top:20px;
  transition: .5s;
  cursor: pointer;
}

.gensatuges .close:hover{
  transform: rotate(180deg);
}

h3{
  margin-top:0;
}

@media(max-width:550px){
  .gensatuges .kolsmepnes{
  width:90%;
  margin-top: 5px;
  height:90%;
  }
}

JS

Код
var modal = $('.gensatuges');
function setModal(display){
  modal.css('display', display);
}

$('button').click(function(){
  setModal('block');
});

$('.close').click(function(){
  setModal('none');
});

$(modal).click(function(e){
  var target = e.target;
  if(!($('.kolsmepnes').is(target)) && $('.kolsmepnes').has(target).length ===0){
  setModal('none');
  }
});

$(document).keydown(function(e){
  if(e.which == 27 ){
  setModal('none');
  }
});

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

Демонстрация
10 Марта 2020 Загрузок: 1 Просмотров: 1657 Комментариев: (19)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 19
tushila
tushila 02 Февраля 2023 17:041
0
Всё хорошо, но вот только как сделать дубль этого окна с другим содержимым. Пробовал менять названия стилей, кнопки, не получается - первый блок открывает то, что во втором (дубле). Подскажите, как быть.
Kosten
Kosten 02 Февраля 2023 18:362
0
Как раз стили здесь не причем, а нужно в JS менять, кто знает. Если бы на чистом стиле было окно, то там по идее можно было поменять id и все, в этом случай нужно поменять JS, не полностью, заменить в коде самом.
Kosten
Kosten 02 Февраля 2023 18:383
0
Рекомендую проще, найти еще окно, здесь на сайте их много, и на чистом стиле есть, или вам нужно, что оба окна по дизайн были аналогичны.
tushila
tushila 02 Февраля 2023 19:104
0
Да, мне нужно, чтобы по дизайну были одинаковыми. Это окно по адаптивности очень хорошо подходит.
Kosten
Kosten 02 Февраля 2023 23:125
+2
Здесь я просто скажу не знаю как, возможно кто другой знает, то плиз отпишите, помогите пользователю.
waak
waak 03 Февраля 2023 07:157
0
Здравствуйте! как всегда читаю комменты на этом сайте и удивляюсь им!
Если не можете помочь зачем писать вообще?

Ладно не буду писать плохих слов а просто покажу как можно помочь человеку с его просьбой так как сайт посвящён именно этому а не глупым комментариям!!!!

Чтобы вы могли создавать несколько окон но при этом не дублировали скрипт а просто указали кнопку и блок нового окна мы с Вами немного перепишем данный скрипт ну а точнее я его перепишу а вы скопируйте его и вставьте в место того то есть полностью замените

Скрипт
Код


<script>

  $('.buttonwaak').click(function(){
  var modal = $(this).attr('name_id');  
  $('#'+modal).css("display","block");
  
});

$('.close').click(function(){
  $('.mymodal').css("display","none");
});

$('.mymodal').click(function(e){
  var target = e.target;
  if(!($('.content').is(target)) && $('.content').has(target).length ===0){
  $('.mymodal').css("display","none");
  }
});

$(document).keydown(function(e){
  if(e.which == 27 ){
  $('.mymodal').css("display","none");
  }
});
</script>

Отлично не забывайте сохранить!

Теперь как выглядит код кнопок и самого окна по сути оно не изменился вообще просто нам нужно добавить id к блоку с окном и name_id к кнопке

пример нескольких окон
Код

<button class="buttonwaak" name_id="waak">Оставить заявку</button>
<button class="buttonwaak" name_id="waak2">Оставить заявку</button>

<div class="mymodal" id="waak">
  <div class="overlay">
  <div class="content">
  <i class="fa fa-times close" aria-hidden="true"></i>
  <h3>Модальное окно</h3>
  </div>
  </div>
</div>

<div class="mymodal" id="waak2">
  <div class="overlay">
  <div class="content">
  <i class="fa fa-times close" aria-hidden="true"></i>
  <h3>Модальное окно2</h3>
  </div>
  </div>
</div>


не много подробнее
У блока окна появился id="waak" это и есть уникальное имя для каждого окошка которое вам нужно будет указывать при добавлении новых типа id="waak2" и тд.

А у кнопке появился атрибут name_id="waak" так вот он должен совпадать с id окошка которое будет открываться по клику на данную кнопу то есть если у кнопки name_id = waak то у окна id должно быть так же id=waak думаю понятно это
так же добавил к кнопки класс вида class="buttonwaak" для вызова окна чтобы избежать вызов окошка по другим кнопка на сайте

Естественно все эти классы и ид можно назвать как вам угодно заменив к примеру слова waak на своё
tushila
tushila 03 Февраля 2023 18:179
0
Спасибо большое! Буду пробовать. У меня тоже сегодня была мысль, что нужно блокам ID присваивать. О результате отпишусь.
tushila
tushila 04 Февраля 2023 04:5115
0
Ещё раз огромное спасибо за помощь, waak! Всё получилось как нельзя лучше. Благодаря вам проблема решена.
-SAM-
-SAM- 03 Февраля 2023 04:196
+1
tushila, причём здесь адаптивность? Внешний вид перенесите к другой версии окна. А с этим кодом так не получиться, поскольку кнопке присвоено открытие окна определенного. Чтобы открывало/закрывало несколько окон, то нужно вводить идентификаторы. На самом деле при клике на кнопку открывается у вас сразу несколько окон, ведь у них один и тот же класс, просто второе окно накладывается поверх первого (в стилях фиксированное местоположение окна).
UPD.:А так, то код скрипта можно так подправить под нужды пользователя:
Код
//Создаем переменную, в которую сохраняем наше модальное окно
var modal = $('.gensatuges');

//Функция устанавливает значение свойства display в то, которое указано в ее параметрах при вызове
function setModal(display){
  $('button:focus').next(modal).css('display', display);
}

//Функция обрабатывает клик по кнопке "Оставить заявку"
$('button').click(function(){
  setModal('block');
});

//Функция обрабатывает клик по кнопке "Закрыть"
$('.close').click(function(){
  modal.hide();
});

//Функция обрабатывает клики по модальному окну, и, если клик не произошел не по блоку content и не по его дочерним элементам, то закрываем модальное окно
$(modal).click(function(e){
  var target = e.target;
  if(!($('.kolsmepnes').is(target)) && $('.kolsmepnes').has(target).length ===0){
  modal.hide();
  }
});

//Если нажата клавиша ESC, то закрываем модальное окно
$(document).keydown(function(e){
  if(e.which == 27 ){
  setModal('none');
  }
});
P.S.: я свой коммент дописал уже после минуса на него, ибо реально цепляют такие "умные" ответы.
UPD.3:
waak
waak 03 Февраля 2023 16:298
-1
Странно слышать такое от того кто постоянно критикует мои материалы и пытается вставить туда свою точку зрения
Цитата -SAM- ()
Умничать у себя на сайте будешь (а нас дискредитировать здесь не стоит, такими сообщениями без "плохих слов")
Я бы и не писал нечего если бы Вы сразу ответили так как сейчас а не в своей монере мол а это тут причем так не сделать иши другое и тд
tushila
tushila 04 Февраля 2023 20:0918
0
-SAM-, в вашем варианте я так и не нашел какие-либо идентификаторы - просто часть кода как на странице https://codepen.io/kocsten/pen/KKpZONP , где то же самое прописано.
Kosten
Kosten 03 Февраля 2023 20:2810
+1
Цитата waak ()
Зачем вообще писать?

Это не глупый комментарий!!!!


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

Или вы просто так скажем ухи объелись.

Это надо в такое вписаться, включайте тормоза.

Жду ответа здесь а не в ЛС!
waak
waak 03 Февраля 2023 23:2311
-1
Делай как считаешь нужным, я лишь выразил свою точку зрения на комментарии человека которые не несли в себе не какой сути - мысли которая бы могла помочь человеку и по этому так написал после чего он его отредактировал и комментарий стал более полезным вот и всё
Kosten
Kosten 04 Февраля 2023 00:0012
+1
Еще раз тебя попрошу ответить на вопрос, почему ты так считаешь (Это не глупый комментарий!!!!) я дальше не читал, меня эти слова и сама направление не скажу что ужаснуло, но был в шоке и не понимал, это ты серьезно или может бухой был.

Почему по твоему мы все остальные, какие то другие, не развитые, сейчас вот я дам пояснение а остальные "холопы" только зря чернила марают.

Когда ты стал считать себя выше остальных, или ты по сути такой, просто нечаянно вскрылось. Я больше скажу, это не первый раз, были другие комментарий, но они больше скользящие, где можно раскидать на две мысли. А здесь я не могу раскидать, здесь одна прямая мысьль и подана по теме.

МЕНЯ ЭТО БОЛЬШЕ ИНТЕРЕСУЕТ!

С кем ты в терках, это ваши сугубые проблемы, и думаю вы взрослые люди и разберетесь.

На счет тебя Waak, что ты взрослый человек, может по физике, а по мыслям, но как такое можно написать. Мы не друзья не братья, где за шутку может прокатить.

Ты бухой был или что с тобой или в голове творится, что такое пишешь, или у тебя проблемы.

Если личное, напиши в личку, что личное, вот не думая написал.. Ладно жду, надеюсь ты здравый человек и поймешь почему (требую) прошу написать. Если для тебя это нормально, пожелаю удачи!
waak
waak 04 Февраля 2023 00:2313
-1
По слушай где ты вообще увидел в моём комментарии оскорбления?

я спросил зачем писать если не комментарий данный не чего не даст пользователю а после остановил себя что мол не буду писать плохих слов и где тут оскорбления? хочешь блокировать за это блокируй что тут такого
Kosten
Kosten 04 Февраля 2023 00:2814
+1
Удачи!

Прошу за эту тему не писать, аналогично бан будет, так как человек ответить не сможет!
-SAM-
-SAM- 04 Февраля 2023 16:5116
+1
UPD.2:

"я спросил зачем писать если не комментарий данный не чего не даст пользователю" © waak - затем, что идёт описание того как работает скрипт (для остальных, а не только для спросившего), что когда от него пытаются добиться иного - это искать тех, кто будет им переписывать (если не хотят поиском пользоваться). И потом, я не могу знать способностей людей, что мои комментарии вполне могут навести на правильную мысль (что сами решат вопрос, без привлечения нас к переписке скриптов под их нужды).

"вы по эволюции выше стоите" © Kosten и "Когда ты стал считать себя выше остальных" © Kosten - так никто ведь и не скрывал, что в JS мы не разбираемся лучше него, если наши комменты стали автоматом "глупыми", когда он решил здесь отписаться - это сугубо его мнение, которое нам довелось услышать в очередной раз.

Если по коду глянуть, то я всё равно выложил скрипт меньше и работает всё лучше (не нужно цеплять никаких именных идентификаторов waak-а, соблюдая нумерацию, а просто на кнопку цепляется... то есть на её класс сделать, что и так понятно - там оно на кнопку без класса идёт, ибо демо). Идентификаторы ставятся для того, чтобы можно было содержимое окна вызвать нужного, а когда код окна идёт как в демке - достаточно задать привязку на какую кнопку нажимают. Если нужно содержимое окна в исходнике где-то вдали от кнопки поместить, которая это всё показывает - мой код не годиться, нужны идентификаторы (не обойтись уже).
Kosten
Kosten 04 Февраля 2023 18:3517
+1
-SAM- ваш завершающий комментарий по данной теме. Что про ВААК,если осознаете, что и с какой мыслей написали, где отделяет себя от других, добро пожаловать.
-SAM-
-SAM- 06 Февраля 2023 11:3119
+1
Кстати, возможно кому-то нужно окно всплывающее просто чтобы появлялось при клике на кнопку (ничего не вводя в него, а просто посмотреть чего в нём), то можно совсем без скрипта всё сделать. В общем, в этом случае достаточно поцепить стиль:
Код
button:focus + .gensatuges{
  display:block;
}
Будет работать потом окошко даже когда в браузере отключена поддержка js. Кнопки закрытия окна тогда тоже можно "выпилить", ибо не нужны становятся. Они здесь еще и на шрифтовых иконках сделаны (у кого на сайте не используется "Font Awesome", то подключать нецелесообразно - нужно свою иконку сделать отдельно будет).
P.S.: это из того, что и так ясно, поскольку есть на сайте решения готовые на этот счёт (всплывающие окна на одних лишь стилях, без использования скриптов - стоит им отдавать своё предпочтение, как считаю).
Войдите:
avatar