Разное

Простое модальное окно: Как создать простое модальное окно на CSS

15.06.2023

Самое простое модальное окно на js / Песочница / Хабр

showDialog

Диалоговое окно которое сделает все само!

А если серьезно это маленькая библиотечка, а точнее там одна функция которая создает очень простое окно, где нет ничего лишнего.

Данный пример и все файлы на github


Разбор по шагам

Шаг 1.
В head нужно подключить два файла showDialog.js, showDialog.css
Шаг 2.
Функция showDialog принимает объект который может содержать следующие ключи

title — заголовок
message — сообщение или шаблон
data — данные которые будут вставлены в шаблон
buttons — кнопки


Hello world

Самый базовый пример
Два аргумента title и message (строка)

showDialog({
    title: 'Сообщение', 
    message: "Hello world"
})


message

message — может принимать несколько типов данных


  1. строки
  2. функции
  3. промисы

Пример message — тип функция

showDialog({
    title: 'Ширина окна',
    message: () => document. body.offsetWidth
})

Пример message — тип промис

showDialog({
    title: 'json с сервера',
    message: fetch('https://jsonplaceholder.typicode.com/todos/1')
})


buttons

buttons — принимает объект


  • где ключ надпись на кнопке
  • а значение callback функция
    которая будет вызвана при нажатии на кнопку

Пример окна валидации

в message передадим строку в которой два input, у каждого input укажем атрибут name
(email и password)

showDialog({
    title: 'Авторизация', 
    message: `<input type="text" placeholder="Логин" name="email">
              <input type="password" placeholder="Пароль" name="password">`,
    buttons: {
        'Вход': function(data){
            // Проверка данных 
            console.log('Данные', data)
        },
         'Забыл пароль': function(data){
            // Сброс пароля
        }
    }
})

Получаем рабочее окно с двумя кнопками

При клике на [Вход] в консоли видим сообщение с данными которые мы ввели
при этом ключи это те самые «name» которые указали


data

data — это объект который встраивается в шаблон по ключам

К примеру в message мы можем указать строку как шаблон «Привет $name»

showDialog({
    title: 'data',
    message: 'Привет $name',
    data: {
        name: 'Вася'
    }
})

теперь добавим кнопку [Это не мое имя] при клике на эту кнопку выведем input где можно будет указать свое имя.

Для этого можно воспользоваться встроенным методом right, для вызова боковой панели

showDialog({
    title: 'data',
    message: 'Привет $name',
    data: {
        name: 'Вася'
    },
    buttons: {
        'Это не мое имя': function(data) {
            this.right({
                message: `<input type='text' name='name' placeholder='Введите свое имя'>`
                })
            }
        }
    })

this.right принимает объект с ключами message и buttons
и по умолчанию добавляется кнопка «Сохранить».

При нажатии на эту кнопку в data добавляются новые данные и основной шаблон перерисовывается.

На этом пока все, спасибо за внимание.

модальное окно | Все о создании сайтов

по 2Web 398

PrettyPopin — jQuery плагин, который вызывает модальное окно с внешним контентом.

Так как этот плагин легко устанавливается и настраивается, то его можно использовать для быстрого и простого отображения содержимого в контексте.

Подробнее…

Categories jQueryTags ajax, модальное окно4 комментария

по 2Web 440

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

Все полностью готово для внедрения на сайт. В архиве вы найдете необходимые HTML, CSS и Javascript файлы. Также, если вам нужно что-то отредактировать в дизайне, то можно поправить PSD.

Подробнее…

Categories PSDTags модальное окно, форма обратной связиОставить комментарий

по 2Web 369

Пятничная халява этой недели представляет собой готовые к использованию модальные всплывающие окна в HTML/CSS.

Скачав архив, вы получите все необходимые HTML, CSS и графические файлы, включая примеры (jQuery подключается через

Google API), и файлы в PSD формате для удобной настройки дизайна под свои нужды.

Эти окна легко внедрять в существующие проекты (различные интерфейсы и маркетинговые приложения), а с помощью Photoshop файлов, легко изменять под свои требования.

Подробнее…

Categories PSD, Шаблоны, Элементы управленияTags модальное окно1 комментарий

по 2Web 531

Сегодня для бесплатного скачивания было представлено

простое модальное окно, идеально подходящее для небольших запросов на подтверждение.

Его преимущества и в привлекательности и в простоте. Но одновременно это и кошмар для верстальщиков (Кто нибудь возмется сверстать это окошко?) из-за очень тщательной проработки интерфейса.

Подробнее…

Categories PSDTags бесплатно, модальное окно, скачатьОставить комментарий

по 2Web 331

Simple Modal — небольшой плагин для создания модальных окон. Он может использоваться для вывода окон предупреждения или сообщений, требующих подтверждения от пользователя. Плагин поддерживает обратные вызовы, может работать в асинхронном режиме и принимать контент с внешних страниц.

Simple Modal не является lightbox-окном, хотя, если скрыть некоторые его части, то сходство есть.

Подробнее…

Categories MooToolsTags модальное окно, плагин, скачатьОставить комментарий

Simple Popup Modal Made Easy

Всплывающие окна используются практически на каждом веб-сайте. Они есть на каждом сайте, и мы все равно тратим слишком много времени на их создание. Что ж, отличные новости! Существует совершенно новый диалоговый тег, который мы можем использовать для упрощения нашей работы в качестве разработчиков. Сколько времени я мог бы сэкономить, используя это за последние три года, я хотел бы знать. Давайте проверим этот тег диалога.

Настройка HTML

Итак, давайте настроим HTML для простого диалога.

 <диалог>
   
Это было легко.

Это довольно просто. Вы можете задаться вопросом: «Хорошо? Где тогда модальный?». Это хороший вопрос. По умолчанию диалог скрыт. Мы могли бы переключить это, чтобы показать, добавив простой стиль «display: block» или что-то по этому пути. Однако вам следует избегать использования css для отображения и скрытия тега диалога, так как это вызовет некоторые проблемы.

Отображение и закрытие диалогового окна с Javascript

Лучше всего переключать этих парней с помощью этих двух простых строк кода с использованием чистого Javascript.

 
 документ.querySelector('диалог').showModal()
document.querySelector('диалог').close()

Чаще всего мы используем эту строку кода в событии щелчка. Тем не менее, вы можете звонить туда, где хотите и когда вам нужно. Диалоги также имеют возможность закрываться клавишей «Escape» по умолчанию!

Открытие диалогового окна при загрузке страницы

Если вы хотите, чтобы ваше диалоговое окно открывалось по умолчанию, есть простой способ сделать это. Все, что нам нужно сделать, это добавить атрибут «open» к тегу диалогового окна.

 <диалог открыт>
   
Это было легко.

Вот так. Теперь мы знаем, как сделать простой диалог. Теперь давайте рассмотрим несколько простых трюков, чтобы анимировать открытие модального окна и использовать два моих любимых инструмента для разработки внешнего интерфейса — популярный фреймворк Alpine.js и Tailwind.

Стилизация фона

Нет никакой разницы в стилизации диалога с любым другим html. Тем не менее, в диалоговом окне есть классный маленький псевдоэлемент, стиль которого будет прост. Этот псевдоэлемент называется фоном. Вот как мы добавляем цвет фона снаружи диалогового окна, который покрывает остальную часть экрана. Скорее всего, это будет непрозрачный цвет, такой как черный, который немного просвечивает. Давайте взглянем.

 диалог::фон {
фон: RGB(0, 0, 0, 0,5)
}

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

Добавление попутного ветра 

   <диалог>
  
  
  <строка x1="18" y1="6" x2="6" y2="18" />
  <строка x1="6" y1="6" x2="18" y2="18" />
  
 
Это было легко.

Бум! Tailwind — один из моих любимых инструментов, с ним очень легко и быстро сделать что-то подобное. Я также пошел дальше и добавил «x» для возможности закрыть модальное окно позже. Теперь, когда все выглядит немного лучше, давайте перейдем к альпинизму.

Закрытие диалога с Alpine

Основная причина, по которой мы хотим использовать Alpine здесь, состоит в том, чтобы сделать нашу жизнь еще проще. Давайте добавим еще немного html и tailwind, чтобы быстро добавить кнопку, чтобы помочь с этим примером. Мы также инициализируем весь этот компонент как компонент Alpine, добавив «x-data='{}’» в div, который окружает компонент.

 

  <дел>
  
  
  <строка x1="18" y1="6" x2="6" y2="18" />
  <строка x1="6" y1="6" x2="18" y2="18" />
  
     
Это было легко.

Хорошо, теперь это больше похоже на пример из реальной жизни. Итак, прямо сейчас мы ничего не делаем с Alpine, она просто есть. Давайте добавим наш код javascript для переключения и объединим его с некоторыми функциями кликов Alpine.

 

<диалог>

<строка x1="18" y1="6" x2="6" y2="18" />
<строка x1="6" y1="6" x2="18" y2="18" />

 
Это было легко.
  




<скрипт>
  функция openDialog() {
  document.querySelector('диалог').showModal()
  }
функция closeDialog() {
  document.querySelector('диалог').close()
  }

Как видно из приведенного выше примера, мы добавили несколько событий кликов из Alpine, которые закроют и откроют диалоговое окно. На значке «х» мы вызываем функцию для закрытия диалога, а при нажатии кнопки мы вызываем функцию для открытия или отображения диалога. Однако давайте подумаем о пользовательском опыте. Пользователь, вероятно, ожидает, что сможет закрыть диалоговое окно, щелкнув за пределами диалогового окна. Alpine делает это смехотворным. Давайте посмотрим, как мы можем этого добиться.

 

<диалог>



<строка x1="18" y1="6" x2="6" y2="18" />
<строка x1="6" y1="6" x2="18" y2="18" />

 
Это было легко.
  






<скрипт>
  функция openDialog() {
  document.querySelector('диалог').showModal()
  }
функция closeDialog() {
  document.querySelector('диалог').close()
  }

Что мы делали выше? Ну, во-первых, мы добавили div для переноса содержимого в диалоговое окно и добавили одну из самых крутых вспомогательных функций Alpine — «click.outside». Всякий раз, когда использование щелкает за пределами div, имеющего эту функцию, срабатывает все, что находится в кавычках. Итак, почему мы добавили div внутри диалогового окна, а не просто добавили «click.outside» к фактическому тегу диалогового окна? Тег диалога имеет прикрепленный к нему фон, который расширяет всю страницу. Чтобы обойти это маленькое раздражающее препятствие, мы добавляем div для переноса содержимого диалогового окна, а затем используем вспомогательную функцию «click.outside», чтобы мы могли фактически закрыть диалоговое окно. Также обратите внимание на класс «p-0», который мы добавили в диалог. к диалогам добавлено заполнение по умолчанию, поэтому мы хотим удалить заполнение по умолчанию, чтобы, если пользователь щелкнет заполнение, он не закрыл диалог. Последнее, на что стоит обратить внимание, это то, что мы добавили «.stop» к событию нажатия кнопок. Это предотвратит запуск события click.outside из диалогового окна. Без него диалог не откроется.

Добавление анимации открытия

Последнее, что мы должны здесь сделать, это добавить анимацию открытия в диалоговое окно, чтобы оно не появлялось и не выглядело незавершенным. Все, что нам нужно сделать здесь, это просто добавить анимацию к диалогу, когда он имеет атрибут «открытый». Давайте посмотрим, как это работает.

 диалог[открыть] {
-webkit-анимация: показывать 0,3 секунды в обычном режиме;
}
@-webkit-ключевые кадры показать{
от {
преобразование: масштаб (0)
}
к {
преобразование: масштаб (1)
}
}

Это довольно просто, если вы знакомы с анимацией. Эта анимация будет запущена, когда в диалог будет добавлен атрибут «open».

Дополнительные источники для изучения и подведение итогов

Это основа диалога. Есть еще немного более подробной информации о теге диалога. Если вы хотите узнать больше об этом, ознакомьтесь с документацией здесь.

Взгляните на пример, который мы разработали выше.

кнопки — Альтернативы модальному диалогу для простых форм

спросил

Изменено 4 года, 9 месяцев назад

Просмотрено 4к раз

У меня есть кнопка, которая открывает простую модальную форму. Форма имеет имя, описание и кнопку сохранения. Я не сторонник наличия кнопки слева от экрана, диалогового окна, которое появляется в центре и требует наведения курсора мыши, чтобы заполнить форму. Чувствует себя оторванным и неэффективным.

Есть ли способ вывести форму прямо над кнопкой? Какой-то способ связать их, чтобы вы знали, что форма соответствует действию, которое вы только что выполнили? Я думал об использовании панели аккордеона и т. д., но я не хочу, чтобы соседний контент перемещался вверх или вниз по экрану. Стараюсь держать вещи на месте. Я бы предпочел, чтобы форма отображалась на экране, например, модальная.

Думаю, я мог бы использовать всплывающую подсказку, но это похоже на неправильное использование элемента.

Мысли? Идеи? Примеры?

  • формы
  • кнопки
  • всплывающее окно
  • модальные окна
  • всплывающее окно

Position Absolute Might Help You

9 0002 Вот что я недавно сделал. У меня была страница, где была куча вариантов:

(это скриншот отдельной области страницы, а не всей страницы)

Каждая из этих опций, по сути, является кнопкой. В старом дизайне нажатие на любую из этих опций открывало всплывающее окно, похожее на ваше, но только с 1-3 полями для заполнения пользователем.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *