Форум программистов, компьютерный форум, киберфорум
mr_dramm
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  

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

Запись от 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
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Всего комментариев 10
Комментарии
  1. Старый комментарий
    Запись от mr_dramm размещена 27.06.2022 в 02:36 mr_dramm вне форума
  2. Старый комментарий
    А зачем вообще нужны модальные окна?
    Это забава для начинающих программистов. Или я не прав?
    Запись от das1 размещена 27.06.2022 в 07:26 das1 вне форума
  3. Старый комментарий
    ...
    Запись от das1 размещена 27.06.2022 в 07:26 das1 вне форума
  4. Старый комментарий
    Аватар для mr_dramm
    ----
    Запись от mr_dramm размещена 27.06.2022 в 14:14 mr_dramm вне форума
  5. Старый комментарий
    Аватар для mr_dramm
    Цитата Сообщение от das1
    А зачем вообще нужны модальные окна?
    Это забава для начинающих программистов. Или я не прав?
    Они повсюду, авторизация модальное окно, отправить сообщение модальное окно, лайтбокс с фоткой модальное окно и т.д.
    Запись от mr_dramm размещена 27.06.2022 в 14:15 mr_dramm вне форума
  6. Старый комментарий
    Цитата Сообщение от mr_dramm
    Они повсюду, авторизация модальное окно, отправить сообщение модальное окно, лайтбокс с фоткой модальное окно и т.д.
    Повсюду? - это скорее исключение. Или мода такая? Я написал немало программ и мне модальные окна ни разу не потребовались.
    Запись от das1 размещена 27.06.2022 в 15:12 das1 вне форума
  7. Старый комментарий
    Аватар для mr_dramm
    Цитата Сообщение от das1
    Повсюду? - это скорее исключение. Или мода такая? Я написал немало программ и мне модальные окна ни разу не потребовались.
    Это web программирование язык javascript , модальное окно на сайте это норма

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

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

    Сайт может быть и без модальных окон.
    Запись от mr_dramm размещена 27.06.2022 в 15:15 mr_dramm вне форума
  8. Старый комментарий
    Аватар для mr_dramm
    Подумал что надо бы еще сделать опцию чтобы окно автоматически закрывалось если кликаешь мимо окна
    Запись от mr_dramm размещена 27.06.2022 в 15:20 mr_dramm вне форума
  9. Старый комментарий
    Почему бы
    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 вне форума
  10. Старый комментарий
    Аватар для mr_dramm
    Цитата Сообщение от voral
    Почему бы
    1. modal не убрать внутрь modal-overlay
    2. modal-overlay добdвить justify-content: center;
    3. убрать расчетные left и top для modal
    4. Я обычно стараюсь не засорять DOM элементами, которые могут и не пригодиться соответственно modal и modal можно генерить либо каждый раз, либо при первом обращении.
    voral, да согласен со всем, по 1 и 2 пункту я так тоже делаю не знаю почему я так сделал в этом примере просто наверное не особо задумывался, надо переделать. Спасибо
    Запись от mr_dramm размещена 17.07.2022 в 15:35 mr_dramm вне форума
 
Новые блоги и статьи
Модель здравосохранения 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 создаём четыре события. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru