Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
15 / 15 / 9
Регистрация: 22.11.2013
Сообщений: 762
1

Как создать простейший pop-up?

10.01.2014, 21:17. Просмотров 1151. Ответов 3
Метки нет (Все метки)


Всем привет! Ребят, помогите сделать простейший pop-up при нжатии на кнопку? Просто чтобы при нажатии на кнопку вылетало окошко?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
10.01.2014, 21:17
Ответы с готовыми решениями:

Как создать pop-up окна без обычных броузерских иконок ?
Ну, чтобы совсем, кроме краев, ничего не было: ни синей полосы, ни кнопки закрытия и иже с ним....

Как создать простейший 3d редактор
Здравствуйте, уважаемые коллеги! Обращаюсь со следующим вопросом. Как можно реализовать на Visual...

как создать DLL в C++ простейший
Смотрел у буржуев туториал подключения DLL делал все по схеме выдало кучу ошибок. Кто то знает где...

Как создать простейший текстовый редактор
Помогите пожалуйста создать текстовый редактор на подобе БЛОкнота,который бы содержал пункты...

__________________
Помогаю в написании курсовых работ и дипломов здесь.
Записывайтесь на профессиональные курсы Fullstack-разработчиков на JavaScript‌
3
47 / 47 / 24
Регистрация: 16.09.2013
Сообщений: 349
14.01.2014, 02:48 2
bb_oo,

в head
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
$(function () {
    $('a.show_popup').click(function () {
        $('div.'+$(this).attr("rel")).fadeIn(500);
        $("body").append("<div id='overlay'></div>");
        $('#overlay').show().css({'filter' : 'alpha(opacity=80)'});
        return false;               
    }); 
    $('a.close').click(function () {
        $(this).parent().fadeOut(100);
        $('#overlay').remove('#overlay');
        return false;
    });
});
</script>
в body

Ссылка на окошко
HTML5
1
2
3
<div class="link_group">
    <a class="show_popup" rel="reg_form" href="#">Открыть окошко</a>
</div>
Сам div, который вылезет
HTML5
1
2
3
4
5
<div class="popup reg_form">
    <a class="close" href="#">Close</a>
    <h2>Привет! Я окошко</h2>
              Текст
</div>
И это в style.css всунь
CSS
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
.link_group {
margin:20px auto;
width:555px;
text-align:center;
}
.link_group a {
margin:0 20px;
padding:5px 15px;
color:#000;
font-weight:bold;
display:inline-block;
vertical-align:top;
*display:inline;
*zoom:1;
position:relative;
text-decoration:none;
text-transform:uppercase;
border:1px solid #ccc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
behavior: url(PIE.htc);
}
.link_group a:hover {
color:#cc0000;
}
 
/**********All styles popup**********/
.popup {
padding:5px 15px 15px;
position:fixed;
top:100px;
left:50%;
display:none;
overflow:hidden;
border:1px solid #ccc;
background:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
z-index:100;
behavior: url(PIE.htc);
}
.popup h2 {
font:bold 18px/32px Arial, san-serif;
}
.popup a.close {
width:16px;
height:16px;
display:block;
text-indent:-9999px;
position:absolute;
top:10px;
right:10px;
background:url(../images/close.png) no-repeat;
}
 
.reg_form {
margin-left:-200px;
width:400px;
}
.reg_form form {
margin-top:10px;
}
 
#overlay {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
display:none;
background:#000;
opacity:.8;
}
Не забудь потом нарисовать в пейнте крестик (в качестве закрытия окошка). В css путь прописан (измени, если надо)
1
602 / 577 / 103
Регистрация: 16.07.2012
Сообщений: 1,762
14.01.2014, 06:31 3
fancybox скачайте или подобный скрипт)
1
0 / 0 / 0
Регистрация: 10.01.2013
Сообщений: 53
19.04.2015, 13:58 4
Не забудьте в head добавить
HTML5
1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
19.04.2015, 13:58

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь или здесь.

Как создать на Visual C++ Win 32 простейший Архиватор
Как создать на Visual C++ Win 32 простейший Архиватор Напишите пожалуста код, или дайте книгу ...

Как в MS Visual Studio создать простейший консольный Hello World?
Здравствуйте, я новичок, хочу освоить программирование в C++, скачал для этого учебник Страуструпа...

Как создать простейший редактор схем и простейшую ГИС?
Есть база данных на SQL Server 2005. Есть клиент для работы с ней на C#. В базе описываются объекты...

Создать раздел (кнопку) в POP-up рабочего стола
например когожда на рабочем столе нажимаешь правую кнопку мы открывается pop-up меню надо добавить...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.