‘орум программистов, компьютерный форум, киберфорум
Ќаши страницы
HTML, CSS
¬ойти
–егистраци€
¬осстановить пароль
 
јмурский
25 / 25 / 10
–егистраци€: 11.11.2014
—ообщений: 252
#1

ћодальное окно без jQuery

17.08.2018, 00:14. ѕросмотров 139. ќтветов 7

«дравствуйте. ѕодскажите пожалуйста модальное окно без использовани€ библиотек, таких как jQuery. „тобы показать одно вспл. окно не гуд тащить библиотеку jQuery. √углил, не нашел, можно просто на jS.
0
Ќадоела реклама? «арегистрируйтесь и она исчезнет полностью.
Similar
Ёксперт
41792 / 34177 / 6122
–егистраци€: 12.04.2006
—ообщений: 57,940
17.08.2018, 00:14
ќтветы с готовыми решени€ми:

 ак сделать простое модальное окно на HTML+CSS (без JS)?
—ейчас пользуюсь сейчас popup maker. Ќо дл€ моих целей это их пушки по...

ћодальное окно
«дравствуйте! ≈сть код обработчик формы ( php ), нужно чтобы после обработки...

Ќе работает модальное окно
ƒобрый день! ѕонадобилось скопировать вЄрстку сайта : http://mtinv.ru...

ћодальное окно bootstrap
<DOCTYPE HTML> <html> <head> <script src="jquery-1.8.3.js"></script> <link...

Ќе работает модальное окно
»спользую Bootstrap. Ѕлок с модальным окном находитс€ после тега footer перед...

7
mrtoxas
ћодератор
Ёксперт HTML/CSS
2552 / 1889 / 1179
–егистраци€: 12.07.2015
—ообщений: 5,098
«аписей в блоге: 3
17.08.2018, 00:41 #2
https://www.w3schools.com/w3css/w3css_modal.asp
2
ƒмитрий ƒмитрий
1 / 1 / 2
–егистраци€: 17.09.2016
—ообщений: 383
17.08.2018, 18:27 #3
https://bootstrap-4.ru/docs/4.0/components/modal/
0
јмурский
25 / 25 / 10
–егистраци€: 11.11.2014
—ообщений: 252
17.08.2018, 18:30  [“—] #4
ƒмитрий ƒмитрий, Ётот компонент требует jQery
0
ƒмитрий ƒмитрий
1 / 1 / 2
–егистраци€: 17.09.2016
—ообщений: 383
17.08.2018, 18:36 #5
÷итата —ообщение от јмурский ѕосмотреть сообщение
Ётот компонент требует jQery
“олько событие на клик и всЄ, нет желани€ подключать библиотеку можно ванилой пользоватьс€, кто мешает.
0
tilda_2311
1 / 1 / 0
–егистраци€: 17.08.2018
—ообщений: 42
17.08.2018, 22:28 #6
јмурский, так а в чЄм проблема то?, создаЄте блок, который €вл€етс€ модальным окном, задаЄте ему display: none, далее, по нажатию на кнопку измен€ете css модального окна на display: block, либо чтобы не засор€ть dom, создавайте этот блок по нажатию на кнопку
0
Mailo
121 / 113 / 14
–егистраци€: 18.02.2010
—ообщений: 1,276
18.08.2018, 00:55 #7
Ќемножко своЄ, немножко не универсальное в плане работы с несколькими модалками и немножко фиг знает как работает на различных устройствах, но из плюсов, вс€ стилистика и размерность на css, а js на js.

HTML5
1
2
3
4
5
6
7
<span class="m_btn">попап</span>
 
 
<div class="overlay"></div>
<div class="modal">
<span class="close_btn"></span>
</div>
CSS
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
/*modal window*/
.overlay{
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.7);
}
.modal{
    display: none;
    width: 500px;
    height: 300px;
    background: #fff;
    position: fixed;
    z-index: 11;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    padding: 20px;
}
.m_open{
    display: block;
}
.close_btn{
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    top: -25px;
    cursor: pointer;
    &:hover{
        @include opa(8);
    }
    &:before{
        display: block;
        content: '';
        width: 25px;
        height: 4px;
        background: #ccc;
        transform: rotate(-45deg);
        position: absolute;
        left: 0;
        right: 0;
    }
    &:after{
        display: block;
        content: '';
        width: 25px;
        height: 4px;
        background: #ccc;
        transform: rotate(45deg);
        position: absolute;
        left: 0;
        right: 0;
    }
}
Javascript
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
window.onload = function(e) {
 
 
//modal window
function Modal(e){
    this.modal = document.querySelector('.modal');
    this.overlay = document.querySelector('.overlay');
    this.close_btn = document.querySelector('.close_btn');
    var popup = this;   
 
    this.open = function(){
        popup.overlay.classList.add('m_open');
        popup.modal.classList.add('m_open');
    }
 
    this.close = function(){
        popup.overlay.classList.remove('m_open');
        popup.modal.classList.remove('m_open');
    }
 
    this.overlay.onclick = popup.close;
    this.close_btn.onclick = popup.close;
}
 
var pop = new Modal();
 
document.querySelector('.m_btn').onclick = function(e){
    pop.open();
    e.preventDefault();
}
 
 
 
 
 
}; //end of window
0
Qwerty_Wasd
901 / 667 / 343
–егистраци€: 16.04.2016
—ообщений: 1,831
«авершенные тесты: 2
18.08.2018, 07:42 #8
”читыва€, что ветка HTML/CSS, вставлю-ка € три копейки - https://codepen.io/qwerty_wasd/pen/PBMLPE
HTML5
1
2
3
4
5
6
7
<div class="midget-module"> 
  <label class="midget-open" for="midget"><img src="https://dummyimage.com/100x100/6985c2/000000.png&amp;text= Ћ» !" alt=""/></label>
  <input id="midget" type="checkbox"/>
  <div class="mid-orginal">
    <label class="midget-close" for="midget">вЬШ</label><img src="https://dummyimage.com/400x400/6985c2/000000.png&amp;text=%D0%AF%20%D0%9C%D0%9E%D0%94%D0%90%D0%9B%D0%AC%D0%9D%D0%9E%D0%95%20%D0%9E%D0%9A%D0%9D%D0%9E!" alt=""/>
  </div>
</div>
CSS
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
*,*:after,*:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: 0;
}
/*стили выше добавлены только дл€ этого примера, в реальном проекте используйте normilize.css\reset.css*/
.midget-module {
    position: relative;
    display: inline-block;
}
 
label.midget-close {
    position: absolute;
    z-index: 99;
    top: 0;
    right: 0;
    font-weight: bold;
    font-size: 30px;
    cursor: pointer;
}
 
label.midget-close:hover {
    color: #fff;
}
 
label.midget-open {
}
 
.mid-orginal {
    display: none;
  background: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}
 
.mid-orginal>img {
    margin: auto;
}
 
input#midget {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
 
input#midget:checked ~ .mid-orginal {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
1
18.08.2018, 07:42
MoreAnswers
Ёксперт
37091 / 29110 / 5898
–егистраци€: 17.06.2006
—ообщений: 43,301
18.08.2018, 07:42

ћодальное окно регистрации
ѕомогите пожалуйста сделать модальное окно регистрации на сайте чтобы оно не...

модальное окно css
¬се знают что ie не поддерживает traget как решить проблему, кто сталкивалс€...

Ќе закрываетс€ модальное окно
ѕомогите разобратьс€ с кодом.”становил на сайт модальное окно,открываетс€ по...


»скать еще темы с ответами

»ли воспользуйтесь поиском по форуму:
8
ќтвет —оздать тему
ќпции темы

 ибер‘орум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
–ейтинг@Mail.ru