Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.07.2016, 15:55
Аватар для Shasoft
Профессор
Отправить личное сообщение для Shasoft Посмотреть профиль Найти все сообщения от Shasoft
 
Регистрация: 03.03.2009
Сообщений: 156

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

p.s.Или может есть способ вызвать модельное окно на css3 с помощью js без изменения ссылки?
Ответить с цитированием
  #2 (permalink)  
Старый 30.07.2016, 16:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

модальное окно 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>
Ответить с цитированием
  #3 (permalink)  
Старый 30.07.2016, 17:42
Аватар для Shasoft
Профессор
Отправить личное сообщение для Shasoft Посмотреть профиль Найти все сообщения от Shasoft
 
Регистрация: 03.03.2009
Сообщений: 156

рони,
Огромное спасибо. Вот рабочий вариант.
Ответить с цитированием
  #4 (permalink)  
Старый 30.07.2016, 19:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Shasoft,
чем предложенный вариант вас не устроил?
Ответить с цитированием
  #5 (permalink)  
Старый 30.07.2016, 23:52
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

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


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

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

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


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

Последний раз редактировалось warren buffet, 31.07.2016 в 00:00.
Ответить с цитированием
  #6 (permalink)  
Старый 31.07.2016, 14:22
Аватар для Shasoft
Профессор
Отправить личное сообщение для Shasoft Посмотреть профиль Найти все сообщения от Shasoft
 
Регистрация: 03.03.2009
Сообщений: 156

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

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

p.s.мне как раз это крутящаяся кнопочка очень понравилась Вообще я в дизайне не очень, поэтому модальное окошко сборное из нескольких копипастов.
Ответить с цитированием
  #7 (permalink)  
Старый 02.08.2016, 05:54
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от Shasoft
мне как раз это крутящаяся кнопочка очень понравилась
Посетителю тоже понравится и он будет закрывать твои окошки не читая. Поэтому в мировой практике инженеров давно подавляют маркетологи, ибо первые гадят сами себе такими вот фичами, идиоты.
Ответить с цитированием
  #8 (permalink)  
Старый 05.08.2016, 11:50
Аватар для Shasoft
Профессор
Отправить личное сообщение для Shasoft Посмотреть профиль Найти все сообщения от Shasoft
 
Регистрация: 03.03.2009
Сообщений: 156

Сообщение от warren buffet Посмотреть сообщение
Посетителю тоже понравится и он будет закрывать твои окошки не читая.
Все зависит от того, что будет в этом окошке.
Ответить с цитированием
  #9 (permalink)  
Старый 05.08.2016, 21:52
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

В твоем окошке 90-х годов по определению ничего полезного не будет. )))
Ответить с цитированием
  #10 (permalink)  
Старый 09.08.2016, 14:28
Аватар для Shasoft
Профессор
Отправить личное сообщение для Shasoft Посмотреть профиль Найти все сообщения от Shasoft
 
Регистрация: 03.03.2009
Сообщений: 156

Время покажет
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Модальное окно в Angular Js!!! Не выходит:(!! Antares_POV Angular.js 4 06.03.2016 21:47
Как вызвать модальное окно с помощью js Tord002 Общие вопросы Javascript 2 21.12.2015 17:28
Всплавающее модальное окно с группой подписчиков вконтакте ??? ilyas-> Элементы интерфейса 32 27.01.2015 14:01
Bootstrap модальное окно igor.3dviz Общие вопросы Javascript 1 09.02.2014 13:27
Как передать переменную в модальное окно sinsir jQuery 24 20.06.2013 16:59