Всем привет.

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


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

_____________

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

модальное окно - это просто обычный див, опционально с фоном на все окно, который имеет наивысший z-index и свою логику по событию onClick на фоне (игнорируем или закрываем)
Чего там писать-то?

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


_____________
[продано копирайтерам]

Есть.
Вот держи. Если нужно усовершенствовать-пиши, доработаю.

/* свойства модального окна по умолчанию */
.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