Всплывающее окно.

@McWinnie · Регистрация: 14.05.2011

Author24 — интернет-сервис помощи студентам

Здравствуйте.
Подскажите, пожалуйста, как добиться данного эффекта:

При клике на ссылку по середине открывается окно (Как в ВК: вокруг окна темный фон).

@parikmaher534 · 13.12.2011, 15:39

Как минимум двумя способами.
Иметь заранее кусок HTML на странице( вашего окна ) и показывать его только когда надо.
Либо генерить его динамически JAvascript-ом. Ну имея какой-нибудь js template вашего окна - тут преимущество что JS темплейт прокешируется

Vovan-VE · 13.12.2011, 15:50

Например: jQuery UI Dialog

@McWinnie · 13.12.2011, 16:40 **[ТС]**

Вот нашел код:

HTML5

<a href="#" onclick="document.getElementById('wind').style.display='block'; return false;" title="Всплывающее окно">Открыть меню</a>
<div id="wind">
Содержание всплывающего окна.
<button type="button" value="закрыть" onclick="document.getElementById('wind').style.display='none'; return false;">
закрыть</button>
</div>

CSS

a {
   text-decoration:none;
   color:#03508c;
   font-weight:bold;
   font-size:16px;
}
 
#wind {
       position: absolute;
    width:320px;
    left: 35%;
      top: 100px;
    border:solid #105a98 4px;
    display: none;
      z-index: 10;
    overflow: hidden;
    background-color:#348c03;
    color:#fff;
    text-align:center;
    padding:10px;
}

Я использую так:

HTML5

1
2

p><a href="#" onclick="document.getElementById('wind').style.display='block'; return false;" title="Всплывающее окно">Клікніть сюди</a>, щоб виконати завдання</p>
  <div id="wind">Текст<p><button type="button" value="закрыть" onclick="document.getElementById('wind').style.display='none'; return false;">закрыть</button></p></div>

Но как применить данный метод к множеству ссылок?

@parikmaher534 · 13.12.2011, 16:52

Смотрите вот как раз яркий пример почему не надо навешивать события хардкорно на DOM элементы.
Давайте напишем лучше так:

Вот ваше окошко:

HTML5

1
2
3

<div id="wind">
<button type="button" value="закрыть" id='close'>закрыть</button>
</div>

А вот ссылки на которые надо событие навесить. Они характеризуются спец классом - "b-win-show"

HTML5

<div id='link-wrapper'>
  <a class='b-win-show' href='#'>1</a>
  <a class='b-win-show' href='#'>2</a>
  <a href='#'>Wrong</a>
  <a class='b-win-show' href='#'>3</a>
</div>

Javascript

window.onload = function(){
 
  var win = document.getElementById("wind");
 
  document.getElementById("link-wrapper").onclick = function(e){
    if( e.target.className.indexOf("b-win-show") != -1 ){
      win.className += ' b-win-visible';
    };
  };
 
  document.getElementById("close").onclick = function(){
    win.className = win.className.replace(" b-win-show","");
  };
};

Класс b-win-visible - display:block - делает окно видимым

@McWinnie · 13.12.2011, 16:58 **[ТС]**

parikmaher534,

Извините, но я не понял как именно я могу это применить.

@parikmaher534 · 13.12.2011, 17:09

Смотрите у вас есть ваше окно которое изначально спрятано(В стилях прописано display:none).
Далее вы нажимаете на ссылку ( причем только ту что надо ) в нашем случае у которой есть класс b-win-show. И по нажатию появляется окно, так как вы в JS навешиваете на него класс по клику - b-win-show( display:block в стилях ).
НУ а закрытие происходит по клику на кнопку с id='close'( Удаляется наш класс b-win-show - который делал окно видимым)

а применить вы сможете вставив этот скрипт в тело страницы обвернув в <script>....</script>

@McWinnie · 13.12.2011, 17:13 **[ТС]**

parikmaher534, а можно пример с кодом?

Вот смотрю-смотрю, а как вставить в свою страницу не понимаю

@parikmaher534 · 13.12.2011, 17:28

Простите обманул вас- писал по памяти без проверки - так будет работать

HTML5

<html>
<head>
<title></title>
</head>
<body>
 
<div id='link-wrapper'>
  <a class='b-win-show' href='#'>1</a>
  <a class='b-win-show' href='#'>2</a>
  <a href='#'>Wrong</a>
  <a class='b-win-show' href='#'>3</a>
</div>
 
<div id="wind">
<button type="button" value="закрыть" id='close'>закрыть</button>
</div>
 
<script>
window.onload = function(){
  var win = document.getElementById("wind");
 
  document.getElementById("link-wrapper").onclick = function(e){
    if( win.className.indexOf("b-win-visible") == -1 ){
      win.setAttribute('class','b-win-visible');
    };
  };
 
  document.getElementById("close").onclick = function(){
    win.className = win.className.replace("b-win-visible","");
  };
};
</script>
</body>
</html>

Новые блоги и статьи
Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .	Telegram бот на C# InfoMaster 08.01.2025 Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .	Использование GraphQL в Go (Golang) InfoMaster 08.01.2025 Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор? Alexander-7 08.01.2025 Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .	Как работать с GraphQL на TypeScript InfoMaster 08.01.2025 Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .	Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .

@McWinnie 1 / 1 / 1 Регистрация: 14.05.2011 Сообщений: 18
		1
	Всплывающее окно. 13.12.2011, 15:33. Показов 18916. Ответов 8 Метки нет (Все метки) Здравствуйте. Подскажите, пожалуйста, как добиться данного эффекта: При клике на ссылку по середине открывается окно (Как в ВК: вокруг окна темный фон). 0

@parikmaher534 38 / 38 / 6 Регистрация: 16.11.2011 Сообщений: 112
	13.12.2011, 15:39	2
	Как минимум двумя способами. Иметь заранее кусок HTML на странице( вашего окна ) и показывать его только когда надо. Либо генерить его динамически JAvascript-ом. Ну имея какой-нибудь js template вашего окна - тут преимущество что JS темплейт прокешируется 0

Vovan-VE 13208 / 6597 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	13.12.2011, 15:50	3
	Например: jQuery UI Dialog 0

@McWinnie 1 / 1 / 1 Регистрация: 14.05.2011 Сообщений: 18
	13.12.2011, 16:58 [ТС]	6
	parikmaher534, Извините, но я не понял как именно я могу это применить. 0

@parikmaher534 38 / 38 / 6 Регистрация: 16.11.2011 Сообщений: 112
	13.12.2011, 17:09	7
	Смотрите у вас есть ваше окно которое изначально спрятано(В стилях прописано display:none). Далее вы нажимаете на ссылку ( причем только ту что надо ) в нашем случае у которой есть класс b-win-show. И по нажатию появляется окно, так как вы в JS навешиваете на него класс по клику - b-win-show( display:block в стилях ). НУ а закрытие происходит по клику на кнопку с id='close'( Удаляется наш класс b-win-show - который делал окно видимым) а применить вы сможете вставив этот скрипт в тело страницы обвернув в <script>....</script> 1

@McWinnie 1 / 1 / 1 Регистрация: 14.05.2011 Сообщений: 18
	13.12.2011, 17:13 [ТС]	8
	parikmaher534, а можно пример с кодом? Вот смотрю-смотрю, а как вставить в свою страницу не понимаю 0

	13.12.2011, 17:28