Javascript-форум - Модальное окно на чистом js

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Модальное окно на чистом js (https://javascript.ru/forum/misc/64265-modalnoe-okno-na-chistom-js.html)

Модальное окно на чистом js

Подскажите ссылку на модельное окно на чистом JS. Чтобы вызывалось/закрывалось не через css3.

p.s.Или может есть способ вызвать модельное окно на css3 с помощью js без изменения ссылки?

модальное окно css js

Shasoft,

<!DOCTYPE html><html class=''>
<head>

  <meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/shasoft/pen/JKrAmX" />


<style class="cp-pen-styles">
.prefix-Dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  display: none;
  pointer-events: none;
}

.prefix-Dialog.active {
  display: block;
  pointer-events: auto;
}
.prefix-Dialog > div {
  width: 494px;
  position: relative;
  margin: 16px auto;
  padding: 16px 16px 13px 16px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
}

/* формируем кнопку закрытия */
.prefix-close {
position: absolute;
top: -10px;
right: -10px;padding: 0;
width: 20px;
height: 20px;
border: 2px solid #ccc;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
background-color: rgba(61, 61, 61, 0.8);
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
text-align: center;
text-decoration: none;
font-weight: bold;
line-height: 20px;
-webkit-transition: all ease .8s;
-moz-transition: all ease .8s;
-ms-transition: all ease .8s;
-o-transition: all ease .8s;
transition: all ease .8s;
}
.prefix-close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
font-size: 12px;
}
.prefix-close:hover {
background-color: rgba(252, 20, 0, 0.8);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
</style></head><body>
<html>
<head>
  <title>Creating a modal window with HTML5 &amp; CSS3</title>
</head>
<body>

  <a href="#" class="prefix-open">Открыть модальное окно через JS</a>
<div id="Modal" class="prefix-Dialog">
   <div>
  <h3>Заголовок</h3>
  <div class="prefix-tabs">
  данные окна
  </div>
  <a class="prefix-close" title="Закрыть" href="#close"></a>
   </div>
</div>
</body>
</html>

<script>
document.addEventListener('DOMContentLoaded', openModal, false);

function openModal() {
[].forEach.call(document.querySelectorAll('.prefix-open, .prefix-close'), function(item) {
        item.addEventListener('click', function(event) {
            event.preventDefault();
            document.querySelector('#Modal').classList.toggle('active');
        });
});
}

</script>
</body></html>

рони,
Огромное спасибо. Вот рабочий вариант.

Shasoft,
чем предложенный вариант вас не устроил?

Модельное окно, это типа страховой полюс и полуклиника, Лесков отдыхает.

ТС, скачай враппер, который из любого элемента делает "модельное" окно простым вызовом someModelWindow(your_lovely_div);

Что касается ссылок, то скачай бегунок, который пробегит по странице и понавешает листенеров на все ссылки по заданным критериями и за тебя напишет

event.stopPropagation();
event.preventDefault();

ЗЫ Проиграл с вертящейся буквочки Хэ. ))) Небось с олимпиады-80 этот дизигн на кодепене висит.

рони,
Полностью устроил. Я свой пример изменил в соответствии с вашей подсказкой.

warren buffet,
а ссылку на какой-нибудь такой врапер не подскажите или название? А то сколько искал, все сводится к "плагин на jQuery"

p.s.мне как раз это крутящаяся кнопочка очень понравилась :) Вообще я в дизайне не очень, поэтому модальное окошко сборное из нескольких копипастов.

Цитата:

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

мне как раз это крутящаяся кнопочка очень понравилась

Посетителю тоже понравится и он будет закрывать твои окошки не читая. Поэтому в мировой практике инженеров давно подавляют маркетологи, ибо первые гадят сами себе такими вот фичами, идиоты.

Цитата:

Сообщение от warren buffet (Сообщение 424047)

Посетителю тоже понравится и он будет закрывать твои окошки не читая.

Все зависит от того, что будет в этом окошке.

В твоем окошке 90-х годов по определению ничего полезного не будет. )))

Время покажет