Добавлено: 22.10.2019 / 13:37
Добрый день.
Присмотрел себе один вариант - рабочий вариант.
Но надо бы дополнить затемнение заднего фона, экрана при открытии.
Исходя из этого кода что можно добавить - чтобы было затемнение?
У кого была практика по подобным вещам?
<script type="text/javascript">
function qqq() {
$(function(){
$('#online-history').dialog({
autoOpen: true,
show: 'fade',
hide: 'fade',
width: 665,
height: 430,
});
$('#online-history').css('overflow','auto');
});
}
</script>
<div id="online-history" title="Название" style="display:none">Содержание окна</div>
<div class="button-panel" align="center"><a href="javascript://" class="button" onclick="qqq(); return false;" >Кнопка вызова окна</a></div>
Да, я знаю - что есть десятки различных вариантов релизации модальных окон.
Но все они грамозкие и недоделанные, не дошлифованные.
Добавлено: 22.10.2019 / 13:39
Якобы считается, что реализация на хтмл лучше, нежели скрипт.
Но ...
Добавлено: 22.10.2019 / 16:44
Чтобы сделать оверлей нужно кинуть доп элемент в body, который будет занимать всю высоту и z-index будет ниже чем у самой модалки. Для body ставится owerflow hidden.
При клике открытии окна соответственно применяешь все стили чтобы всё появилось, а при закрытии убираешь чтобы страница стала обычной.
Добавлено: 22.10.2019 / 16:45
Ну, а вообще модалки писать такое себе. Возьми готовое встроенное в бутстрапе, например, или вот достаточно простые модалки
https://arcticlab.ru/arcticmodal/#docs
Кастомизируй внешний вид под свои потребности и всё.
Добавлено: 22.10.2019 / 18:17
Примеров вроди как полно - а как их "правильно" вставлять?
$('#exampleModal1').arcticmodal();
<span class="m-dotted" id="#example1" onclick="$('#exampleModal1').arcticmodal()">Простое модальное окно</span>
<div class="g-hidden">
<div class="box-modal" id="exampleModal1">
<div class="box-modal_close arcticmodal-close">закрыть</div>
Пример простого модального окна
</div>
</div>
<pre><code class="javascript">$('#exampleModal1').arcticmodal();</code></pre>
Добавлено: 22.10.2019 / 18:18
Вставляю - не работает.
Я потому пример привел в первом посту - что с ним у меня проблем нет.
Добавлено: 22.10.2019 / 20:20
# Бермудский (22.10.2019 / 18:18)
Примеров вроди как полно - а как их "правильно" вставлять?
Вставляю - не работает.
Я потому пример привел в первом посту - что с ним у меня проблем нет.
Из быстрого старта берешь пример подключения стилей и скриптов, вставляешь себе на страницу.
Дальше вставляешь разметку самого модального окна.
После него уже навешиваешь функцию для открытия окна на нужную тебе кнопку $('#exampleModal').arcticmodal();
Добавлено: 22.10.2019 / 20:22
Пример который у них на сайте в быстром старте должен открывать окно после того как страница загрузится если конечно все пути правильно указал при подключении скриптов и стилей
