Кнопка "закрыть окно"

@mosaica · Регистрация: 04.05.2013

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

Добрый день.
Нашел класный скрипт (точнее, наиболее подходящий) для модального окна.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
#module{
display:none;
border-radius:20;
position: absolute;
  width: 400px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -100px;  
  background: white;
  border: solid 1px #7FC9FF;
  padding: 10px;
  overflow: auto;
  box-shadow:0 0 30px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); 
z-index:1;
}
</style>
 
<div id="module"></div>
 
<a onClick="showModule();">Открыть модальное окно</a>

Окно открывается, все отлично, вот только кнопки закрыть нету.
Кто подскажет как ее сделать?

Спасибо

Добавлено через 7 минут

JavaScript
1
2
3
4
5
6
7
8
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 
<script type="text/javascript">
 
function showModule(){
$("#module").show("slow");
}
</script>

Вот скрипт, забыл

@Soldado · 29.05.2013, 18:20

Поместите, допустим в папку images вашего сайта, кнопку закрытия.
Пропишите её во внутрь модального окна

HTML5
1
<div id="module"><img src="images/close.png" id="close" /><!--здесь остальное содержимое--></div>

Задайте стили, чтобы кнопка сместилась вправо и курсор менялся при наведении.

CSS
1
2
3
4
#close{
    float: right;
    cursor:pointer;
}

Скрипт будет такой:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
 
function showModule(){
$("#module").show("slow");
}
 
$(function(){
 $('#close').click(function(){
    $("#module").hide(200);// время закрытия 0,2 секунды. Можно изменить   
 });
 
});
</script>

Всё вместе

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html >
<head>
<title>Модальное окно:</title>
 
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 
<script type="text/javascript">
 
function showModule(){
$("#module").show("slow");
}
 
$(function(){
 $('#close').click(function(){
    $("#module").hide(200); 
 });
 
});
</script>
 
<style>
#module{
display:none;
border-radius:20;
position: absolute;
  width: 400px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -100px;  
  background: white;
  border: solid 1px #7FC9FF;
  padding: 10px;
  overflow: auto;
  box-shadow:0 0 30px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); 
z-index:1;
}
#close{
    float: right;
    cursor:pointer;
}
 
 
</style>    
</head>
<body  >
<div id="module"><img src="images/close.png" id="close" /><!--здесь остальное содержимое--></div>
 
<a onClick="showModule();">Открыть модальное окно</a>
 
</body>
</html>

@mosaica · 30.05.2013, 10:06 **[ТС]**

Идеально.
Даже изображения предоставил.
Спасибо тебе, еще раз выручил.

Добавлено через 15 часов 3 минуты
Еще вопрос:
мне на странице нужно три таких кнопки соотв. всплывают разные ДИВы.
КАк правильно реализовать, если <a onClick="showModule();"> и есть ,собсвтенно, весь скрипт?

@Soldado · 30.05.2013, 10:52

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

мне на странице нужно три таких кнопки соотв. всплывают разные ДИВы.
КАк правильно реализовать, если <a onClick="showModule();"> и есть ,собсвтенно, весь скрипт?

Как-то путанно спросили, не понял в чём проблема.
1. Можно просто три раза продублировать код для трёх разных окон. Изменить все id и имена функции.
Вызов сделать таким, например:

HTML5
1
2
3
4
5
<a onClick="showModule1();">...
 
<a onClick="showModule2();">...
 
<a onClick="showModule3();">

Стили записать так

CSS
1
2
3
#module1, #module2, #module3{
....
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript">
 
function showModule1(){
$("#module1").show("slow");
}
 function showModule2(){
$("#module2").show("slow");
}
function showModule3(){
$("#module3").show("slow");
}
$(function(){
 $('#close1').click(function(){
    $("#module1").hide(200);// время закрытия 0,2 секунды. Можно изменить    
 });
 $(function(){
 $('#close2').click(function(){
    $("#module2").hide(200);// время закрытия 0,2 секунды. Можно изменить    
 });
$(function(){
 $('#close3').click(function(){
    $("#module3").hide(200);// время закрытия 0,2 секунды. Можно изменить    
 });
 
});
</script>

Это если в "лоб" решать задачу.

2. Можно открывать одно и тоже окно, но подгружать в него разный контент из трёх разных (невидимых ) блоков.

@pinedition · 03.01.2015, 15:50

Очень нужна помощь. Вот ссылка http://bekons.lv/contacts.php
Там по щелчку на большом конверте или по надписи "Свяжитесь с нами" модальное окно с формой обратной связи.
При закрытии модального окона, в адресной строке браузера к адресу страницы добавляется "#сlose" (http://bekons.lv/contacts.php#сlose) Можно ли как-то сделать, чтобы этот "#сlose" не дописывался?
Я бы не расстраивался по этому поводу, но этот адрес с "#сlose", попадает еще и в хистори браузера (а модальных окон на сайте много), что совсем неприятно. Человек нажимает "Назад", а его гоняют по несуществующим ссылкам, уже давно закрытых окон.
Буду очень признателен всем за помощь.
P.S.: "#сlose" дописывается только при нажатии кнопки "Закрыть". При щелчке по оверлею окно тоже закрывается, но такого не происходит.

Добавлено через 13 часов 3 минуты
Всё, сам разобрался. onclick="return false" =)

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@mosaica 0 / 0 / 0 Регистрация: 04.05.2013 Сообщений: 27
	30.05.2013, 10:06 [ТС]
	Идеально. Даже изображения предоставил. Спасибо тебе, еще раз выручил. Добавлено через 15 часов 3 минуты Еще вопрос: мне на странице нужно три таких кнопки соотв. всплывают разные ДИВы. КАк правильно реализовать, если <a onClick="showModule();"> и есть ,собсвтенно, весь скрипт? 0

@pinedition 0 / 0 / 0 Регистрация: 03.01.2015 Сообщений: 1
	03.01.2015, 15:50
	Очень нужна помощь. Вот ссылка http://bekons.lv/contacts.php Там по щелчку на большом конверте или по надписи "Свяжитесь с нами" модальное окно с формой обратной связи. При закрытии модального окона, в адресной строке браузера к адресу страницы добавляется "#сlose" (http://bekons.lv/contacts.php#сlose) Можно ли как-то сделать, чтобы этот "#сlose" не дописывался? Я бы не расстраивался по этому поводу, но этот адрес с "#сlose", попадает еще и в хистори браузера (а модальных окон на сайте много), что совсем неприятно. Человек нажимает "Назад", а его гоняют по несуществующим ссылкам, уже давно закрытых окон. Буду очень признателен всем за помощь. P.S.: "#сlose" дописывается только при нажатии кнопки "Закрыть". При щелчке по оверлею окно тоже закрывается, но такого не происходит. Добавлено через 13 часов 3 минуты Всё, сам разобрался. onclick="return false" =) 0