[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Пользовательское модальное окно (popup)
zvezda_t
Всем привет.

Подскажите, пожалуйста, как проще всего создать свою модалку на js?


Раньше создавала отдельное окошко браузера и там выводила нужную инфу.
Сейчас пользуюсь фреймворками и bootstrap Modal.
Сейчас есть необходимость написать на js или без jQuery никак?

_____________

Что ты сделал сегодня - для завтра?
"Приидите ко Мне вси труждающиеся и обремененнии и Аз упокою вы, возмите иго Мое на себе и научитеся от Мене яко кроток есмь и смирен сердцем и обрящете покой душам вашим, иго бо Мое благо и бремя Мое легко есть."(Мф. 11:28-30)
AllesKlar
модальное окно - это просто обычный див, опционально с фоном на все окно, который имеет наивысший z-index и свою логику по событию onClick на фоне (игнорируем или закрываем)
Чего там писать-то? smile.gif

https://jsfiddle.net/q21d4gu5/55/


_____________
[продано копирайтерам]
Эли4ка
Есть.
Вот держи. Если нужно усовершенствовать-пиши, доработаю.
/* свойства модального окна по умолчанию */
.modal {
display: none;
position: fixed; /* фиксированное положение */
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5); /* цвет фона */
z-index: 1050;
/* opacity: 1; по умолчанию модальное окно прозрачно */
margin: 0;
padding: 0;
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 30px auto; /* для отображения модального окна по центру */
}
}
/* свойства для блока, содержащего контент модального окна */
.modal-content {
position: relative;
background-color: #fff;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
outline: 0;
}
@media (min-width: 768px) {
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
}
/* свойства для заголовка модального окна */
.modal-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #eceeef;
}
.modal-title {
margin-top: 0;
margin-bottom: 0;
line-height: 1.5;
font-size: 1.25rem;
font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close {
float: right;
font-family: sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus, .close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
position: relative;
overflow: auto;
}
img{width:100%;}

function MessageBox() {
var boxContainer = document.createElement('div');
boxContainer.className ='popup_box_container modal';
boxContainer.id = "_box";
boxContainer.innerHTML = '\
<div class="modal-dialog">\
<
div class="modal-content">\
<
div class="modal-header">\
<
h3 class="modal-title">тут заголовок</h3>\
<
div class="close" onclick="re(\'_box\')";>х</div>\
</
div>\
<
div class="modal-body"> \
<
p>тут текст</p> \
</
div>\
</
div>\
</
div>';
document.body.appendChild(boxContainer);
}
function re(el) {
el = ge(el);
if (el && el.parentNode) el.parentNode.removeChild(el);
return el;
}
function ge(el) {
return (typeof el == 'string' || typeof el == 'number') ? document.getElementById(el) : el;
}

<p onclick="MessageBox();">Модальное окно</p>

Codepen
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.