Пример модального окна с плюшками

Запись от mr_dramm размещена 27.06.2022 в 02:33

Показов 1804 Комментарии 10

Метки html, php

пример модального с предотвращением изменения ширины содержимого когда scrollbar скрыт
и предотвращением scroll когда окно активно

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html>
 
<head>
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
 
    body {
        transition: width .2s;
        position: relative;
    }
 
    .sticky {
        display: flex;
        justify-content: center;
        position: sticky;
        top: 0;
    }
 
    .btn {
        background: yellow;
        border: none;
        display: block;
        padding: 1em;
        width: 200px;
        border: solid;
        font-weight: bold;
        transition: background-color 1s;
    }
 
    .btn:hover {
        background: purple;
        cursor: pointer;
    }
 
    .modal {
        display: none;
        position: fixed;
        width: 80%;
        top: 50%;
        left: calc(50% - var(--scrollWidth) / 2);
        transform: translate(-50%, -50%);
        background: orange;
        padding: 1rem;
        z-index: 9999;
    }
 
    .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9998;
        background: rgba(0, 0, 0, 0.6);
    }
 
    .show {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
 
    .box {
        width: 90%;
        margin: 0 auto;
    }
 
    .box .item {
        height: 40vh;
        border: solid;
    }
    </style>
</head>
 
<body>
    <div class='box'>
        <div class="sticky">
            <button class="btn btnShowModal" onClick='showModal()'>Show Modal</button>
        </div>
        <p class="item"></p>
        <p class="item"></p>
        <p class="item"></p>
        <p class="item"></p>
        <p class="item"></p>
        <p class="item"></p>
        <p class="item"></p>
        <p class="item"></p>
        <p class="item"></p>
        <p class="item"></p>
    </div>
    <div class="modal-overlay"></div>
    <div class='modal'>
        <span>Simple modal</span>
        <button class="btn btnCloseModal" onClick='closeModal()'>Close Modal</button>
    </div>
    <script>
    function debounce(cb, delay = 250) {
        let timeout
        return (...args) => {
            clearTimeout(timeout)
            timeout = setTimeout(() => {
                cb(...args)
            }, delay)
        }
    }
 
    // window.innerWidth from previous trigger Resize Observer
    let innerWidthPrev = 0
 
    // modal window visible the variable will be equal to true, else false
    let isShowModal = false
 
    // window.innerWidth - document.body.clientWidth before open modal window
    let scrollBarWidth = 0
 
    // document.documentElement.scrollTop before open modal window
    let scrollTop = 0
 
    const updateDocumentWidth = debounce(() => {
        if (window.innerWidth !== innerWidthPrev) {
            const body = document.body
            const doc = document.documentElement
 
            let width = doc.getBoundingClientRect().width
            // if change viewport width when modal window is open
            if (isShowModal) width -= scrollBarWidth
            body.style.width = width + "px"
        }
 
        innerWidthPrev = window.innerWidth
    }, 250)
 
    const showModal = () => {
        scrollBarWidth = window.innerWidth - document.body.clientWidth;
        document.body.style.setProperty("--scrollWidth", scrollBarWidth + "px")
        toggleDisplayModal()
        scrollTop = document.documentElement.scrollTop
        const body = document.body;
        body.style.position = "fixed";
        body.style.top = `-${scrollTop}px`;
    };
    const toggleDisplayModal = () => {
        isShowModal = !isShowModal
        const toggle = e => {
            e.classList.toggle("show");
        }
        document.querySelectorAll("[class^=modal]").forEach(toggle)
    }
 
    const closeModal = () => {
        toggleDisplayModal()
        const body = document.body;
        body.style.position = "";
        body.style.top = "";
        document.documentElement.scrollTop = scrollTop
    };
    const resizeObserver = new ResizeObserver((entries) =>
        updateDocumentWidth()
    );
    resizeObserver.observe(document.documentElement);
    </script>
</body>
 
</html>

Метки html, php

Размещено в ui

Главная страница Ресурсы для почитать и посмотреть front-end »

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

Всего комментариев 10

Комментарии

	Песочница
	Запись от mr_dramm размещена 27.06.2022 в 02:36

	А зачем вообще нужны модальные окна? Это забава для начинающих программистов. Или я не прав?
	Запись от das1 размещена 27.06.2022 в 07:26

...

Запись от das1 размещена 27.06.2022 в 07:26

	----
	Запись от mr_dramm размещена 27.06.2022 в 14:14

Сообщение от das1

А зачем вообще нужны модальные окна?
Это забава для начинающих программистов. Или я не прав?

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

Запись от mr_dramm размещена 27.06.2022 в 14:15 mr_dramm вне форума

Сообщение от mr_dramm

Повсюду? - это скорее исключение. Или мода такая? Я написал немало программ и мне модальные окна ни разу не потребовались.

Запись от das1 размещена 27.06.2022 в 15:12 das1 вне форума

Сообщение от das1

Это web программирование язык javascript , модальное окно на сайте это норма

В любом случае я предложил свою реализацию чтобы можно было воспользоваться если потребуется.

Так сказать сделал вклад в развитие ресурса только и всего.

Сайт может быть и без модальных окон.

Запись от mr_dramm размещена 27.06.2022 в 15:15 mr_dramm вне форума

	Подумал что надо бы еще сделать опцию чтобы окно автоматически закрывалось если кликаешь мимо окна
	Запись от mr_dramm размещена 27.06.2022 в 15:20

Почему бы
1. modal не убрать внутрь modal-overlay
2. modal-overlay добdвить justify-content: center;
3. убрать расчетные left и top для modal
4. Я обычно стараюсь не засорять DOM элементами, которые могут и не пригодиться соответственно modal и modal можно генерить либо каждый раз, либо при первом обращении.

Запись от voral размещена 30.06.2022 в 17:53 voral вне форума

Сообщение от voral

voral, да согласен со всем, по 1 и 2 пункту я так тоже делаю не знаю почему я так сделал в этом примере просто наверное не особо задумывался, надо переделать. Спасибо

Запись от mr_dramm размещена 17.07.2022 в 15:35 mr_dramm вне форума

mr_dramm

Регистрация 17.07.2021
Адрес Космос
Сообщений 2,147
Записей в блоге 14

Новые блоги и статьи Все статьи Все блоги /
Модель здравосохранения 17. Планы на выгорание anaschu 23.05.2026 Вот конкретная схема реализации: В классе Работник добавить: накопленнаяУсталость — растёт каждый час работы, снижается в перерывы и болезни коэффициентПрезентеизма — снижает продуктивность. . .	Изменение цветов в палитре gif файла aka фавикона russiannick 23.05.2026 Изменение цветов в палитре gif файла, юзаемого как фавиконка в составе html-файла, помещенная в base64, средствами нативного Java Script, навеянное сном в майский день. Для работы необходим браузер,. . .	Модель здравосохранения 16. Слишком хорошие и здоровые сотрудники уходят, недовольные зарплатой anaschu 23.05.2026 Отладка увольнений и настройка производительности Сегодня во второй половине дня разобрались с механикой увольнений и настроили коэффициент сложности заданий. Вот что было сделано. . . .	Как я стал коммунистом))) Модель сохранения здоровья сотрудников, запись блога номер 15 anaschu 23.05.2026 Внезапно хорошее здоровье сотрудников не нужно капиталистам?))
Модель здравоСохранения 15. Как мы чинили AnyLogic модель рабочего коллектива: сочленение диаграммы состояний болезней и поломок в ресурспул anaschu 23.05.2026 Как мы чинили AnyLogic модель рабочего коллектива Сегодня разобрались с пятью багами, из-за которых модель либо падала с ошибкой, либо давала совершенно бессмысленные результаты. Каждый баг был. . .	Диалоги с ИИ zorxor 23.05.2026 Насколько я понимаю - Вы - Искусственный Интеллект. Это так? Да, всё верно. Я — искусственный интеллект. Я представляю собой большую языковую модель, созданную для помощи в самых разных задачах. . . .	Модель здравосохранения 14. Собираем всю модель вместе. anaschu 22.05.2026 Модель собрана. В будущих постах на видео я покажу, как она работает. В этом посте запускаем её, проверяем результаты и разбираем что можно с ней делать дальше. Перед запуском проверяем. . .	Модель здравоохранения 13. Добавление самой системы здравоохранения. anaschu 22.05.2026 В предыдущем посте мы настроили болезни. Теперь добавим события, которые управляют здоровьем всего коллектива, а также настроим рабочий график и расчёт финансов. В Main создаём четыре события. . . .

Наверх

Сообщение форума

Отменить изменения