Форма регистрации во всплывающем окне

@Курам · Регистрация: 12.08.2012

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

Здравствуйте, форумчане. При создании сайта возникла проблема с кнопкой регистрации, хочу сделать так, чтобы при нажатии на нее открывалось маленькое окошечко с формой, но в мозилле открывается окно на весь браузер+ маленькое окошечко, которое не уменьшает шрифт, поля и т.д., в эксплорере открывается большое окно без маленького. Подскажите как сделать форму в маленьком окне. Пробовал и в пикселях указывать и по-другому, не получается. Сайт нужно сделать в рамках курсового проекта, времени маловато, да и после работы не всегда получается за ПК сесть. Нас месяцок учили писать сайт на HTML, но по программе была версия 4-ая, мне же нужно сделать его на 5-ой с использованием css3. Помогите, пожалуйста, если разбираетесь в этом нелегком деле. Файлы с кодами прикрепил.
Благодарю за внимание.

@ludmila-sv · 20.11.2014, 12:15

Сообщение от Курам

хочу сделать так, чтобы при нажатии на нее открывалось маленькое окошечко с формой

Это ява-скрипт нужен. Но Вы ж его, наверно, не проходили. Т.е. сделать-то могу, но ведь будет понятно, что не Вы делали.

Сообщение от Курам

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

Лично у меня открывается одинаково. Да и откуда взяться в мозилле маленькому окошечку - идет же просто переход по ссылке на другую страницу.

Все эти открывающиеся маленькие окошечке - это скрытые дивы, которые при нажатии на кнопку становятся видимыми.

@Taatshi · 20.11.2014, 12:30

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

@Курам · 20.11.2014, 18:08 **[ТС]**

Сообщение от ludmila-sv

Это ява-скрипт нужен. Но Вы ж его, наверно, не проходили. Т.е. сделать-то могу, но ведь будет понятно, что не Вы делали.

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

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

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

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

Спасибо, посмотрю сейчас. А можете посоветовать какие-то видеоуроки или учебники по HTML5, CSS3, JS, Photoshop и базам данных?

@Курам · 20.11.2014, 19:02 **[ТС]**

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

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

Помудохался с кодом (я его не понимаю), скачал картинку png для закрытия окна в папку, сохранил там, где находится сайт в подкаталог images, все равно открывает в большом. Возможно не туда вставил или не так прописал что-то, что скрипт не срабатывает.

@ludmila-sv · 20.11.2014, 21:01

То, что Вы сделали - это совсем не то, что нужно.
Править надо вообще не reg.html, а template.html

1. Добавляем класс ссылке:

HTML5
1
<a href="reg.html" class="show_popup"> Регистрация</a>

2. вставляем в конец

HTML5
1
<div id="reg_block"><div id="close">Закрыть</div></div>

3. вставляем скрипт

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript" src="jquery.js"></script> // подключение самой библиотеки. jquery.js скачайте откуда-нибудь
<script type="text/javascript">
$(function () {
    $('a.show_popup').click(function () { // находим ссылку с классом show_popup и на событие click вешаем функцию
        $('#reg_block').fadeIn(500); // находим блок с id="reg_block". Он будет плавно появляться в течение 500 миллисекунд
        $("body").append("<div id='overlay'></div>"); // к body прицепляем еще один див - он будет создавать затемнение
        var h = document.body.offsetHeight; // высота body 
        var w = (document.body.offsetWidth - 600)/2; // это нужно, чтоб центрировать блок reg_block. 600 - это ширина reg_block
        $('#overlay').css({'height': h+'px'}); // блоку затемнения задаем высоту
        $('#reg_block').css({'margin-left': w+'px'}); // блоку reg_block задаем левый отступ
        return false;    // это для предотвращения перехода по ссылке на другую страницу при клике на   a.show_popup        
    });
    $('div#close').click(function () { // кнопка "Закрыть"
        $(this).parent().fadeOut(100); // $(this) - это, по чему кликают, в данном случае div с id=close
                                                 // $(this).parent() - это родительский элемент этого дива, т.е. div с id=reg_block
        $('#overlay').remove('#overlay'); // удаляем див-затемнение
    });
});
</script>

4. добавляем стили

CSS
1
2
3
4
<style type="text/css">
#overlay {position: absolute; top:0; left:0; width: 100%; background: rgba(0,0,0,0.3); z-index:100;}
#reg_block {width: 600px; height: 400px; position: absolute; top: 100px; background: #ccc; display: none; z-index:200;}
</style>

Всё вместе

Кликните здесь для просмотра всего текста

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="keywords" content="для поисковых систем">
<meta name="description" content="краткое описание веб-страницы">
<title>Сайт встреч выпускников ФМФ</title>
<link rel="stylesheet" type="text/css" href="style.css" />


<nav>
<ul>
<li><a href="template.html">Главная</a>
</li>
<li><a href="#">Структура факультета</a></li>
<li><a href="#">Новости</a>
<li><a href="#">Выпускники</a><ul>

<li><a href="#"> Математика и физика</a></li>
<li><a href="#">Математика и информатика</a></li>
<li><a href="#">Физика</a></li>
<li><a href="#">Физика и информатика</a></li>
<li><a href="#">Прикладная математика и информатика</a></li>
<li><a href="#">МОАИС</a></li></ul>

</li>

<li><a href="reg.html" class="show_popup"> Регистрация</a></li>
</ul>

</li>
</li>

</nav>

<body>
<section id="page"> 
<header> 
<h1>Добро пожаловать!</h1>

</header>

<div class="line"></div> 
<article id="structure"> 
<h2>Статья 1</h2>
<div class="line"></div>
<div class="articleBody rolling-nav">
<figure> 
<a href="statja1">
<img src="http://tutorialzine.com/img/featured/641.jpg" width="620" height="340" /></a>
</figure>
<p></p>
<p> </p>
</div>
</article>

<footer> 
<div class="line"></div>
<p>Copyright 2014 - YourSite.com</p> 
<a href="#" class="up">Go UP</a>
<a href="http://strbsu.ru/" class="by">Ссылка на сайт БашГУ(СФ)</a>
<a href="mailto:radik-kuram@yandex.ru?subject=Письмо от подписчика">Напишите нам</a>
<a href="Javascript:window.alert('Пример Javascript кода')">Пример JavaScript</a>
</footer>
</section> 

<script src="script1"></script>
<script src="script2"></script>
<script src="script.js"></script>

<style type="text/css">
#overlay {position: absolute; top:0; left:0; width: 100%; background: rgba(0,0,0,0.3); z-index:100;}
#reg_block {width: 600px; height: 400px; position: absolute; top: 100px; background: #ccc; display: none; z-index:200;}
</style>
<div id="reg_block"><div id="close">Закрыть</div></div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$('a.show_popup').click(function () {
$('#reg_block').fadeIn(500);
$("body").append("<div id='overlay'></div>");
var h = document.body.offsetHeight;
var w = (document.body.offsetWidth - 600)/2;
$('#overlay').css({'height': h+'px'});
$('#reg_block').css({'margin-left': w+'px'});
return false;
});
$('div#close').click(function () {
$(this).parent().fadeOut(100);
$('#overlay').remove('#overlay');
});
});
</script>

</body>
</html>

Наполнение <div id="reg_block"> сделайте сами - перенесите со страницы reg.html

@Курам · 22.11.2014, 15:55 **[ТС]**

Попробовал сделать как Вы написали, к форме регистрации теперь не применяется css, кнопка закрыть расположена не там, где хотелось бы. Сейчас читаю книгу Фрименов про HTML, XHTML, CSS, но там опять же 4.0.1 версия, хотя суть не сильно изменилась по сравнению с 5-ой. Может что и успею за 2 недели перед защитой сотворить

У меня так получилось в коде:

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="keywords" content="для поисковых систем">
<meta name="description" content="краткое описание веб-страницы">
<title>Сайт встреч выпускников ФМФ</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<!-- Internet Explorer HTML5 enabling script: -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
 
.clear {
zoom: 1;
display: block;
}
</style>
<![endif]-->
<nav>
<ul>
<li><a href="template.html">Главная</a>
</li>
<li><a href="#">Структура факультета</a></li>
<li><a href="#">Новости</a>
<li><a href="#">Выпускники</a><ul>
 
 
<li><a href="#"> Математика и физика</a></li>
<li><a href="#">Математика и информатика</a></li>
<li><a href="#">Физика</a></li>
<li><a href="#">Физика и информатика</a></li>
<li><a href="#">Прикладная математика и информатика</a></li>
<li><a href="#">МОАИС</a></li></ul>
 
</li>
 
<li><a href="reg.html" class="show_popup"> Регистрация</a></li>
</ul>
 
</li>
</li>
 
</nav>
 
<body>
<section id="page"> <!-- Определяем секцию #page-->
<header> <!-- Задаем шапку -->
<h1>Добро пожаловать!</h1>
 
</header>
<!-- Article 1 start -->
<div class="line"></div> <!-- разделяющая полоса -->
<article id="structure"> <!-- Новый тег для статей -->
<h2>Статья 1</h2>
<div class="line"></div>
<div class="articleBody rolling-nav">
<figure> <!-- тег для отображения картинки для статьи -->
<a href="statja1">
<img src="http://tutorialzine.com/img/featured/641.jpg" width="620" height="340" /></a>
</figure>
<p></p>
<p> </p>
</div>
</article>
<!-- Article 1 end -->
<footer> <!-- Маркируем футер -->
<div class="line"></div>
<p>Copyright 2014 - YourSite.com</p> <!-- Копирайт сайта -->
<a href="#" class="up">Go UP</a>
<a href="http://strbsu.ru/" class="by">Ссылка на сайт БашГУ(СФ)</a>
<a href="mailto:radik-kuram@yandex.ru?subject=Письмо от подписчика">Напишите нам</a>
<a href="Javascript:window.alert('Пример Javascript кода')">Пример JavaScript</a>
</footer>
</section> <!-- Закрываем секцию #page -->
<!-- JavaScript файлы -->
<script src="script1"></script>
<script src="script2"></script>
<script src="script.js"></script>
 
<style type="text/css">
#overlay {position: absolute; top:0; left:0; width: 100%; background: rgba(0,0,0,0.3); z-index:100;}
#reg_block {width: 600px; height: 400px; position: absolute; top: 100px; background: #ccc; display: none; z-index:200;}
</style>
<div id="reg_block"><form  action="mysuperscript.php" autocomplete="on">
                <h1>Вход на сайт</h1>
                <p>
                    <label for="username" class="uname" data-icon="u" > Ваш e-mail или имя пользователя </label>
                    <input id="username" name="username" required="required" type="text" placeholder="Введите имя пользователя или e-mail"/>
                </p>
                <p>
                    <label for="password" class="youpasswd" data-icon="p"> Ваш пароль </label>
                    <input id="password" name="password" required="required" type="password" placeholder="Введите пароль" />
                </p>
                <p class="keeplogin">
                    <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
                    <label for="loginkeeping">Запомнить пароль</label>
                </p>
                <p class="login button">
                    <input type="submit" value="Войти" />
                </p>
                <p class="change_link">
                    Вы еще не зарегестрировались?
                    <a href="#tosubscribe" class="to_subscribe">Присоединяйтесь к нам</a>
                </p>
            </form>
        </div>
 
        <div id="subscribe" class="animate form">
            <form  action="mysuperscript.php" autocomplete="on">
                <h1> Войти </h1>
                <p style="text-align: center"><button>Close</button></p>
                <p>
                    <label for="usernamesignup" class="uname" data-icon="u">Ваше имя пользователя</label>
                    <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="Имя пользователя" />
                </p>
                <p>
                    <label for="emailsignup" class="youmail" data-icon="e" > Ваш e-mail</label>
                    <input id="emailsignup" name="emailsignup" required="required" type="text" placeholder="e-mail"/>
                </p>
                <p>
                    <label for="passwordsignup" class="youpasswd" data-icon="p">Ваш пароль </label>
                    <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder=""/>
                </p>
                <p>
                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Пожалуйста, подтвердите пароль </label>
                    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder=""/>
                </p>
                <p class="signin button">
                    <input type="submit" value="Зарегестрироваться"/>
                </p>
                <p class="change_link">
                    Вы уже зарегестрированы?
                    <a href="#tologin" class="to_subscribe">Тогда войдите</a>
                </p>
                
                <div id="close">Закрыть</div></div>
 
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('a.show_popup').click(function () { // находим ссылку с классом show_popup и на событие click вешаем функцию
$('#reg_block').fadeIn(500); // находим блок с id="reg_block". Он будет плавно появляться в течение 500 миллисекунд
$("body").append("<div id='overlay'></div>"); // высота body
var h = document.body.offsetHeight;
var w = (document.body.offsetWidth - 600)/2; // это нужно, чтоб центрировать блок reg_block. 600 - это ширина reg_block
$('#overlay').css({'height': h+'px'}); // блоку затемнения задаем высоту
$('#reg_block').css({'margin-left': w+'px'}); // блоку reg_block задаем левый отступ
return false;  // это для предотвращения перехода по ссылке на другую страницу при клике на   a.show_popup  
});
$('div#close').click(function () { // кнопка "Закрыть"
$(this).parent().fadeOut(100); // $(this) - это, по чему кликают, в данном случае div с id=close
                                                 // $(this).parent() - это родительский элемент этого дива, т.е. div с id=reg_block
$('#overlay').remove('#overlay'); // удаляем див-затемнение
});
});
</script>
 
</body>
</html>

Благодарю за помощь, Людмила!

Добавлено через 13 минут
Стиль добавил временный в style.css, хоть внешне лучше будет выглядеть.

CSS
1
2
3
4
5
6
7
8
body {
background-color: #AFDBFF;
margin-left: 20%;
margin-right: 20%;
border: 3px double black;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}

@ludmila-sv · 22.11.2014, 16:27

Сообщение от Курам

Попробовал сделать как Вы написали, к форме регистрации теперь не применяется css, кнопка закрыть расположена не там, где хотелось бы.

Ну так reg.css (или как он у Вас назывался) нужно было подключить. Причем его нужно будет подправить, наверное, - размеры немного изменить.

вот это

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('a.show_popup').click(function () { // находим ссылку с классом show_popup и на событие click вешаем функцию
$('#reg_block').fadeIn(500); // находим блок с id="reg_block". Он будет плавно появляться в течение 500 миллисекунд
$("body").append("<div id='overlay'></div>"); // высота body
var h = document.body.offsetHeight;
var w = (document.body.offsetWidth - 600)/2; // это нужно, чтоб центрировать блок reg_block. 600 - это ширина reg_block
$('#overlay').css({'height': h+'px'}); // блоку затемнения задаем высоту
$('#reg_block').css({'margin-left': w+'px'}); // блоку reg_block задаем левый отступ
return false;  // это для предотвращения перехода по ссылке на другую страницу при клике на   a.show_popup  
});
$('div#close').click(function () { // кнопка "Закрыть"
$(this).parent().fadeOut(100); // $(this) - это, по чему кликают, в данном случае div с id=close
                                                 // $(this).parent() - это родительский элемент этого дива, т.е. div с id=reg_block
$('#overlay').remove('#overlay'); // удаляем див-затемнение
});
});
</script>

переставьте в head.
Это

CSS
1
2
3
4
<style type="text/css">
#overlay {position: absolute; top:0; left:0; width: 100%; background: rgba(0,0,0,0.3); z-index:100;}
#reg_block {width: 600px; height: 400px; position: absolute; top: 100px; background: #ccc; display: none; z-index:200;}
</style>

тоже. Или в файл со стилями. Я писала это всё в одном месте - мне так проще отладить код было, но для красоты, конечно, это надо всё перенести.

Сдвигать boby на 20% по ширине и высоте, на мой взгляд, - жуть

У boby обычно ставят margin: 0; padding: 0;
Но, с другой стороны, - дело Ваше.

Добавлено через 50 секунд
И комментарии в ява-скрипте лучше удалить.

@Курам · 22.11.2014, 20:39 **[ТС]**

Спасибо!
Еще поковырялся, перенес Вход на кнопку, там тоже окно бы сделать вместо открывающейся ссылки. Что-то я неправильно сделал, при нажатии на кнопку "Регистрация" в браузере скролл бар уменьшается (т.е. размер окна для сайта становится длиннее).
Это template.html

Кликните здесь для просмотра всего текста

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="keywords" content="для поисковых систем">
<meta name="description" content="краткое описание веб-страницы">
<title>Сайт встреч выпускников ФМФ</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('a.show_popup').click(function () { 
$('#reg_block').fadeIn(500); 
$("body").append("<div id='overlay'></div>"); 
var h = document.body.offsetHeight;
var w = (document.body.offsetWidth - 600)/2; 
$('#overlay').css({'height': h+'px'}); 
$('#reg_block').css({'margin-left': w+'px'}); 
return false;   
});
$('div#close').click(function () { 
$(this).parent().fadeOut(100); 
                                               
$('#overlay').remove('#overlay');
});
});
</script>
<link rel="stylesheet" type="text/css" href="reg.css" />
 
<!-- Internet Explorer HTML5 enabling script: -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
 
.clear {
zoom: 1;
display: block;
}
</style>
<![endif]-->
<nav>
<ul>
<li><a href="template.html">Главная</a>
</li>
<li><a href="#">Структура факультета</a></li>
<li><a href="#">Новости</a>
<li><a href="#">Выпускники</a><ul>
 
 
<li><a href="#"> Математика и физика</a></li>
<li><a href="#">Математика и информатика</a></li>
<li><a href="#">Физика</a></li>
<li><a href="#">Физика и информатика</a></li>
<li><a href="#">Прикладная математика и информатика</a></li>
<li><a href="#">МОАИС</a></li></ul>
 
</li>
 
<li><a href="reg.html" class="show_popup"> Регистрация</a></li>
<li><a href="login.html">Вход</a></li>
</ul>
 
</li>
 
</nav>
 
<body>
 
<section id="page"> <!-- Определяем секцию #page-->
<header> <!-- Задаем шапку -->
<h1>Добро пожаловать!</h1>
 
</header>
<div id="close">
<p class="close">
                <input type="submit" value="Закрыть"/>
                </div>
                
<!-- Article 1 start -->
<div class="line"></div> <!-- разделяющая полоса -->
<article id="structure"> <!-- Новый тег для статей -->
<h2>Статья 1</h2>
<div class="line"></div>
<div class="articleBody rolling-nav">
<figure> <!-- тег для отображения картинки для статьи -->
<a href="statja1">
<img src="http://tutorialzine.com/img/featured/641.jpg" width="620" height="340" /></a>
</figure>
<p></p>
<p> </p>
</div>
</article>
<!-- Article 1 end -->
<footer> <!-- Маркируем футер -->
<div class="line"></div>
<p>Copyright 2014 - YourSite.com</p> <!-- Копирайт сайта -->
<a href="#" class="up">Go UP</a>
<a href="http://strbsu.ru/" class="by">Ссылка на сайт БашГУ(СФ)</a>
<a href="mailto:radik-kuram@yandex.ru?subject=Письмо от подписчика">Напишите нам</a>
<a href="Javascript:window.alert('Пример Javascript кода')">Пример JavaScript</a>
</footer>
</section> <!-- Закрываем секцию #page -->
<!-- JavaScript файлы -->
<script src="script1"></script>
<script src="script2"></script>
<script src="script.js"></script>
 
 
 
 
        <div id="subscribe" class="animate form">
            <form  action="mysuperscript.php" autocomplete="on">
                <h1> Войти </h1>
                
                <p>
                    <label for="usernamesignup" class="uname" data-icon="u">Ваше имя пользователя</label>
                    <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="Имя пользователя" />
                </p>
                <p>
                    <label for="emailsignup" class="youmail" data-icon="e" > Ваш e-mail</label>
                    <input id="emailsignup" name="emailsignup" required="required" type="text" placeholder="e-mail"/>
                </p>
                <p>
                    <label for="passwordsignup" class="youpasswd" data-icon="p">Ваш пароль </label>
                    <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder=""/>
                </p>
                <p>
                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Пожалуйста, подтвердите пароль </label>
                    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder=""/>
                </p>
                <p class="signin button">
                    <input type="submit" value="Зарегестрироваться"/>
                </p>
                <p class="change_link">
                    Вы уже зарегестрированы?
                    <a href="#tologin" class="to_subscribe">Тогда войдите</a>
                </p>
                 <p class="change_link">
                    Вы еще не зарегестрировались?
                    <a href="#tosubscribe" class="to_subscribe">Присоединяйтесь к нам</a>
                </p>
                <p class="login button">
                    <input type="submit" value="Войти" />
                </p>
                
                </div>
 
 
 
</body>
</html>

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
nav {
    /*  text-align: center; */
  margin: 20px 0;
    }
    nav ul ul {
      display: none;
    }
    nav ul li:hover > ul {
      display: block;
    }
    nav ul {
      background: #efefef;
      background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
      background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
      background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
      box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
      padding: 0 20px;
      border-radius: 7px; 
      list-style: none;
      position: relative;
      display: inline-table;
    }
    nav ul:after {
        content: ""; clear: both; display: block;
      }
    nav ul li {
      float: left;
    }
    nav ul li:hover {
        background: #4b545f;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
      }
    nav ul li:hover a {
          color: #fff;
        }
    nav ul li a {
        display: block; padding: 15px 30px;
        color: #757575; text-decoration: none;
      }
    nav ul ul {
      background: #5f6975; border-radius: 0px; padding: 0;
      position: absolute; top: 100%;
    }
    nav ul ul li {
        float: none;
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a;
    position: relative;
      }
    nav ul ul li a {
          padding: 15px 30px;
          color: #fff;
        }
    nav ul ul li a:hover {
            background: #4b545f;
          }
    nav ul ul ul {
      position: absolute; left: 100%; top:0;
    }
body {
background-color: #AFDBFF;
margin-left: 0;
margin-right: 0;
border: 3px double black;
padding: 10px 10px 10px 10px;
font-family: 'sans-serif','BebasNeueRegular','Arial Narrow';
}

@Курам · 22.11.2014, 20:41 **[ТС]**

reg.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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
#subscribe,
#login{
    position: absolute;
    top: 200px;
    right: 30%;
    left: 30%;
    width: 30%;
    padding: 18px 6% 160px 6%;
    margin: 0 0 35px 0;
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189,0.8);
    box-shadow:
        0pt 2px 5px rgba(105, 108, 109,  0.7),
        0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    border-radius: 5px;
}
#login{
    z-index: 22;
}
/**** текст ****/
#wrapper h1{
    font-size: 48px;
    color: rgb(6, 106, 117);
    padding: 2px 0 10px 0;
    font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
    font-weight: bold;
    text-align: center;
    padding-bottom: 30px;
}
/** На данный момент только webkit поддерживает background-clip:text; **/
#wrapper h1{
    background:
    -webkit-repeating-linear-gradient(-45deg,
        rgb(18, 83, 93) ,
        rgb(18, 83, 93) 20px,
        rgb(64, 111, 118) 20px,
        rgb(64, 111, 118) 40px,
        rgb(18, 83, 93) 40px);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
 
#wrapper h1:after{
    content:' ';
    display:block;
    width:100%;
    height:2px;
    margin-top:10px;
    background:
        linear-gradient(left,
            rgba(147,184,189,0) 0%,
            rgba(147,184,189,0.8) 20%,
            rgba(147,184,189,1) 53%,
            rgba(147,184,189,0.8) 79%,
            rgba(147,184,189,0) 100%);
}
/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder  {
    color: rgb(190, 188, 188);
    font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{
    color: rgb(190, 188, 188);
    font-style: italic;
}
input {
  outline: none;
}
/* все поля исключают submit и checkbox */
#wrapper input:not([type="checkbox"]){
    width: 92%;
    margin-top: 4px;
    padding: 10px 5px 10px 32px;
    border: 1px solid rgb(178, 178, 178);
    box-sizing : content-box;
    border-radius: 3px;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    transition: all 0.2s linear;
}
#wrapper input:not([type="checkbox"]):active,
#wrapper input:not([type="checkbox"]):focus{
    border: 1px solid rgba(91, 90, 90, 0.7);
    background: rgba(238, 236, 240, 0.2);
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}
@font-face {
    font-family: 'FontomasCustomRegular';
    src: url('fonts/fontomas-webfont.eot');
    src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontomas-webfont.woff') format('woff'),
         url('fonts/fontomas-webfont.ttf') format('truetype'),
         url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
/** магический трюк! **/
[data-icon]:after {
    content: attr(data-icon);
    font-family: 'FontomasCustomRegular';
    color: rgb(106, 159, 171);
    position: absolute;
    left: 10px;
    top: 35px;
    width: 30px;
}
/*стилизуем обе кнопки*/
#wrapper p.button input{
    width: 30%;
    cursor: pointer;
    background: rgb(61, 157, 179);
    padding: 8px 5px;
    font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
    color: #fff;
    font-size: 24px;
    border: 1px solid rgb(28, 108, 122);
    margin-bottom: 10px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    box-shadow:
        0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
        0px 0px 0px 3px rgb(254, 254, 254),
        0px 5px 3px 3px rgb(210, 210, 210);
    transition: all 0.2s linear;
}
#wrapper p.button input:hover{
    background: rgb(74, 179, 198);
}
#wrapper p.button input:active,
#wrapper p.button input:focus{
    background: rgb(40, 137, 154);
    position: relative;
    top: 1px;
    border: 1px solid rgb(12, 76, 87);
    box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
p.login.button,
p.signin.button{
    text-align: right;
    margin: 5px 0;
}
/* стилизуем чекбокс "запомнить меня"*/
.keeplogin{
    margin-top: -5px;
}
.keeplogin input,
.keeplogin label{
    display: inline-block;
    font-size: 12px;
    font-style: italic;
}
.keeplogin input#loginkeeping{
    margin-right: 5px;
}
.keeplogin label{
    width: 60%;
}
p.change_link{
    p.change_link {
    position: absolute;
    color: #7F7C7C;
    left: 30%;
    height: 35px;
    width: 250px;
    padding: 17px 25px 20px;
    font-size: 16px;
    text-align: center;
    border-top: 1px solid #DBE5E8;
    border-radius: 0px 0px 5px 5px;
    background: repeating-linear-gradient(-45deg, #AFDBFF, rgba(160, 184, 191, 0.31) 15px, 
    rgba(237, 241, 242, 1) 15px, 
    (181, 209, 208, 1) 30px, 
    rgba(245, 245, 245, 0.58) 30px) repeat scroll 0% 0% 
    rgba(224, 215, 234, 0.14);
}
}
#wrapper p.change_link a {
    display: inline-block;
    font-weight: bold;
    background: rgb(247, 248, 241);
    padding: 2px 6px;
    color: rgb(29, 162, 193);
    margin-left: 10px;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid rgb(203, 213, 214);
    transition: all 0.4s  linear;
}
#wrapper p.change_link a:hover {
    color: rgb(57, 191, 215);
    background: rgb(247, 247, 247);
    border: 1px solid rgb(74, 179, 198);
}
#wrapper p.change_link a:active{
    position: relative;
    top: 1px;
}
#register{
    z-index: 21;
    opacity: 0;
}
#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login{
    z-index: 22;
    animation-name: fadeInLeft;
    animation-delay: .1s;
}
.animate{
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
 
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
#toregister:target ~ #wrapper #login,
#tologin:target ~ #wrapper #register{
    animation-name: fadeOutLeftBig;
}
 
@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
 
    100% {
        opacity: 0;
        transform: translateX(-20px);
    }
}
.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 a.close {
width:16px;
height:16px;
display:block;
text-indent:-9999px;
position:absolute;
top:10px;
right:10px;
background:url(/images/close.png) no-repeat;}
}

login.html:

Кликните здесь для просмотра всего текста

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
 <!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="keywords" content="для поисковых систем">
<meta name="description" content="краткое описание веб-страницы">
<title>Вход</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
$(function () {
$('a.show_popup').click(function () { 
$('#reg_block').fadeIn(500); 
$("body").append("<div id='overlay'></div>"); 
var h = document.body.offsetHeight;
var w = (document.body.offsetWidth - 600)/2; 
$('#overlay').css({'height': h+'px'}); 
$('#reg_block').css({'margin-left': w+'px'}); 
return false;   
});
$('div#close').click(function () { 
$(this).parent().fadeOut(100); 
                                               
$('#overlay').remove('#overlay');
});
});
    </script>
<link rel="stylesheet" type="text/css" href="reg.css" />
<div id="reg_block"><form  action="mysuperscript.php" autocomplete="on">
                <h1 align="center">Вход на сайт</h1>
                <p>
                    <label for="username" class="uname" data-icon="u" > Ваш e-mail или имя пользователя </label>
                    <input id="username" name="username" required="required" type="text" placeholder="Введите имя пользователя или e-mail"/>
                </p>
                <p>
                    <label for="password" class="youpasswd" data-icon="p"> Ваш пароль </label>
                    <input id="password" name="password" required="required" type="password" placeholder="Введите пароль" />
                </p>
                <p class="keeplogin">
                    <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
                    <label for="loginkeeping">Запомнить пароль</label>
                </p>
                
               
            </form>
        </div>
        <body>
        </body>
</div>

Поменял стиль полосатых линий, теперь они вообще не отображаются по каким-то причинам, если только самому в браузере через ПКМ-Исследовать элемент не вставить те же правила, что и прописаны в файле css. Кнопку закрыть в формы Регистрация и Вход на нужное место не получается воткнуть. Может сделать как ссылку посреди формы где-то, я так полагаю, что на нее какой-то скрипт тоже надо прописать в 1-2 строки чтоб форма закрывалась.

@Курам · 22.11.2014, 20:43 **[ТС]**

Вот reg.html:

Кликните здесь для просмотра всего текста

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="keywords" content="для поисковых систем">
<meta name="description" content="краткое описание веб-страницы">
<title>Регистрация</title>
<link rel="stylesheet" type="text/css" href="reg.css" />
<
</head>
 
<!-- Internet Explorer HTML5 enabling script: -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
 
            .clear {
                zoom: 1;
                display: block;
            }
</style>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
<div id="container_demo" >
    <!-- спрятанный якорь, чтобы избежать прыжков http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
    <a class="hiddenanchor" id="tosubscribe"></a>
    <a class="hiddenanchor" id="tologin"></a>
    <div id="wrapper">
        <div id="login" class="animate form">
        <script type="text/javascript">
</script>
<a class="show_popup" rel="info" href="reg.html">Регистрация</a>
<div class="popup info">
        <a class="close" href="reg.html" class="show_popup">Закрыть</a>
        <!--здесь что угодно-->                  
         
</div>  
            <form  action="mysuperscript.php" autocomplete="on">
                <h1>Вход на сайт</h1>
                <p>
                    <label for="username" class="uname" data-icon="u" > Ваш e-mail или имя пользователя </label>
                    <input id="username" name="username" required="required" type="text" placeholder="Введите имя пользователя или e-mail"/>
                </p>
                <p>
                    <label for="password" class="youpasswd" data-icon="p"> Ваш пароль </label>
                    <input id="password" name="password" required="required" type="password" placeholder="Введите пароль" />
                </p>
                <p class="keeplogin">
                    <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
                    <label for="loginkeeping">Запомнить пароль</label>
                </p>
                <p class="login button">
                    <input type="submit" value="Войти" />
                </p>
                <p class="change_link">
                    Вы еще не зарегестрировались?
                    <a href="#tosubscribe" class="to_subscribe">Присоединяйтесь к нам</a>
                </p>
            </form>
        </div>
 
        <div id="subscribe" class="animate form">
            <form  action="mysuperscript.php" autocomplete="on">
                <h1> Войти </h1>
                <p>
                    <label for="usernamesignup" class="uname" data-icon="u">Ваше имя пользователя</label>
                    <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="Имя пользователя" />
                </p>
                <p>
                    <label for="emailsignup" class="youmail" data-icon="e" > Ваш e-mail</label>
                    <input id="emailsignup" name="emailsignup" required="required" type="text" placeholder="e-mail"/>
                </p>
                <p>
                    <label for="passwordsignup" class="youpasswd" data-icon="p">Ваш пароль </label>
                    <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder=""/>
                </p>
                <p>
                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Пожалуйста, подтвердите пароль </label>
                    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder=""/>
                </p>
                <p class="signin button">
                    <input type="submit" value="Зарегестрироваться"/>
                </p>
                <p class="change_link">
                    Вы уже зарегестрированы?
                    <a href="#tologin" class="to_subscribe">Тогда войдите</a>
                </p>
                <p style="text-align: center"><button>Закрыть</button></p>
                <a href="template.html">Вернуться на главную<a>
            </form>
        </div>
    </div>
</div>
</body>
</html>

@ludmila-sv · 23.11.2014, 11:50

Чем объяснять, что у Вас не так, проще просто сделать

template.html

Кликните здесь для просмотра всего текста

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="keywords" content="для поисковых систем">
<meta name="description" content="краткое описание веб-страницы">
<title>Сайт встреч выпускников ФМФ</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="reg.css" />
<!-- Internet Explorer HTML5 enabling script: -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
 
            .clear {
                zoom: 1;
                display: block;
            }
</style>
<![endif]-->
</head>
<body>
<nav>
                        <ul>
                            <li><a href="template.html">Главная</a>
                            </li>
                            <li><a href="#">Структура факультета</a></li>
                            <li><a href="#">Новости</a>
                            <li><a href="#">Выпускники</a><ul>
                            
                            
                            <li><a href="#"> Математика и физика</a></li>
                            <li><a href="#">Математика и информатика</a></li>
                            <li><a href="#">Физика</a></li>
                            <li><a href="#">Физика и информатика</a></li>
                            <li><a href="#">Прикладная математика и информатика</a></li>
                            <li><a href="#">МОАИС</a></li></ul>
                            
                            </li>
                        
                        <li><a href="reg.html" class="show_popup"> Регистрация</a></li>
                        </ul>
                        
                    </li>
                    </li>
                
</nav>
 
 
<section id="page"> <!-- Определяем секцию #page-->
    <header> <!-- Задаем шапку -->
    <h1>Добро пожаловать!</h1>
 
    </header>
 
<!-- Article 1 start -->
    <div class="line"></div>  <!-- разделяющая полоса -->
    <article id="structure"> <!-- Новый тег для статей -->
        <h2>Статья 1</h2>
        <div class="line"></div>
        <div class="articleBody rolling-nav">
            <figure> <!-- тег для отображения картинки для статьи -->
                <a href="statja1">
                <img src="http://tutorialzine.com/img/featured/641.jpg" width="620" height="340" /></a>
            </figure>
            <p></p>
            <p> </p>
        </div>
    </article>
<!-- Article 1 end -->
 
    <footer> <!-- Маркируем футер -->
        <div class="line"></div>
        <p>Copyright 2014 - YourSite.com</p> <!-- Копирайт сайта -->
        <a href="#" class="up">Go UP</a>
        <a href="http://strbsu.ru/" class="by">Ссылка на сайт БашГУ(СФ)</a>
        <a href="mailto:radik-kuram@yandex.ru?subject=Письмо от подписчика">Напишите нам</a>
        <a href="Javascript:window.alert('Пример Javascript кода')">Пример JavaScript</a>
    </footer>
</section> <!-- Закрываем секцию #page -->
 
 
<div id="reg_block">
        <div id="login">
            <form  action="mysuperscript.php" autocomplete="on">
                <h1>Вход на сайт</h1>
                <p>
                    <label for="username" class="uname" data-icon="Ваш e-mail" > Ваш e-mail или имя пользователя </label>
                    <input id="username" name="username" required="required" type="text" placeholder="Введите имя пользователя или e-mail"/>
                </p>
                <p>
                    <label for="password" class="youpasswd" data-icon="Ваш пароль"> Ваш пароль </label>
                    <input id="password" name="password" required="required" type="password" placeholder="Введите пароль" />
                </p>
                <p class="keeplogin">
                    <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
                    <label for="loginkeeping">Запомнить пароль</label>
                </p>
                <p class="login button">
                    <input type="submit" value="Войти" />
                </p>
                <p class="change_link">
                    Вы еще не зарегестрировались?
                    <a href="#" class="to_subscribe" id="to_subscribe">Присоединяйтесь к нам</a>
                </p>
            </form>
        <div class="close">Закрыть</div>
        </div>
 
        <div id="subscribe">
            <form  action="mysuperscript.php" autocomplete="on">
                <h1> Войти </h1>
                <p>
                    <label for="usernamesignup" class="uname" data-icon="u">Ваше имя пользователя</label>
                    <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="Имя пользователя" />
                </p>
                <p>
                    <label for="emailsignup" class="youmail" data-icon="e" > Ваш e-mail</label>
                    <input id="emailsignup" name="emailsignup" required="required" type="text" placeholder="e-mail"/>
                </p>
                <p>
                    <label for="passwordsignup" class="youpasswd" data-icon="p">Ваш пароль </label>
                    <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder=""/>
                </p>
                <p>
                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Пожалуйста, подтвердите пароль </label>
                    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder=""/>
                </p>
                <p class="signin button">
                    <input type="submit" value="Зарегестрироваться"/>
                </p>
                <p class="change_link">
                    Вы уже зарегестрированы?
                    <a href="#" class="to_subscribe" id="to_login">Тогда войдите</a>
                </p>
            </form>
        <div class="close">Закрыть</div>
        </div>
</div>
 
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
    $('a.show_popup').click(function () {
        $('#reg_block').fadeIn(500);
        $("body").append("<div id='overlay'></div>");
        var h = document.body.offsetHeight;
        var w = (document.body.offsetWidth - 600)/2; 
        $('#overlay').css({'height': h+'px'});
        $('#reg_block').css({'margin-left': w+'px'});
        return false;              
    });
    $('div.close').click(function () {
        $('#reg_block').fadeOut(100);
        $('#overlay').remove();
    });
    $('#to_subscribe').click(function () {
        $('#login').hide();
        $('#subscribe').show();
        return false;              
    });
    $('#to_login').click(function () {
        $('#login').show();
        $('#subscribe').hide();
        return false;              
    });
});
</script>
 
</body>
</html>

@ludmila-sv · 23.11.2014, 11:50

reg.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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
#subscribe,
#login{
    position: relative;
    top: 0px;
    width: 88%;
    padding: 20px 6%;
    margin: 0;
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189,0.8);
    box-shadow:
        0pt 2px 5px rgba(105, 108, 109,  0.7),
        0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    border-radius: 5px;
}
#subscribe {display: none;}
 
/**** текст ****/
#reg_block h1{
    font: bold 30px FontomasCustomRegular, Arial,sans-serif;
    color: rgb(6, 106, 117);
    padding: 10px 0;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-align: center;
}
 
/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder  {
    color: rgb(190, 188, 188);
    font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{
    color: rgb(190, 188, 188);
    font-style: italic;
}
input {
  outline: none;
}
/* все поля исключают submit и checkbox */
#reg_block input:not([type="checkbox"]){
    width: 92%;
    margin-top: 4px;
    padding: 5px;
    border: 1px solid rgb(178, 178, 178);
    box-sizing: content-box;
    border-radius: 3px;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    transition: all 0.2s linear;
}
#reg_block input:not([type="checkbox"]):active,
#reg_block input:not([type="checkbox"]):focus{
    border: 1px solid rgba(91, 90, 90, 0.7);
    background: rgba(238, 236, 240, 0.2);
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}
@font-face {
    font-family: 'FontomasCustomRegular';
    src: url('fonts/fontomas-webfont.eot');
    src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontomas-webfont.woff') format('woff'),
         url('fonts/fontomas-webfont.ttf') format('truetype'),
         url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
/*стилизуем обе кнопки*/
#reg_block p.button input, .close{
    width: 100px;
    cursor: pointer;
    background: rgb(61, 157, 179);
    padding: 5px;
    font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
    color: #fff;
    font-size: 16px;
    border: 1px solid rgb(28, 108, 122);
    margin-bottom: 10px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    box-shadow:
        0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
        0px 0px 0px 3px rgb(254, 254, 254),
        0px 5px 3px 3px rgb(210, 210, 210);
    transition: all 0.2s linear;
}
.close, #reg_block p.button input:hover{
    background: rgb(74, 179, 198);
}
.close:active, .close:focus,
#reg_block p.button input:active,
#reg_block p.button input:focus{
    background: rgb(40, 137, 154);
    border: 1px solid rgb(12, 76, 87);
    box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
p.login.button,
p.signin.button{
    text-align: right;
    margin: 0px 25px;
}
/* стилизуем чекбокс "запомнить меня"*/
.keeplogin{
    margin-top: -5px;
}
.keeplogin input,
.keeplogin label{
    display: inline-block;
    font-size: 12px;
    font-style: italic;
}
.keeplogin input#loginkeeping{
    margin-right: 5px;
}
.keeplogin label{
    width: 80%;
}
p.change_link{
    position: relative;
    color: rgb(127, 124, 124);
    left: 10px;
    height: 20px;
    width: 440px;
    padding: 17px 30px 20px 30px;
    font-size: 16px ;
    text-align: right;
    border-top: 1px solid rgb(219, 229, 232);
    border-radius: 0 0  5px 5px;
    background: rgb(225, 234, 235);
    background: repeating-linear-gradient(-45deg,
    rgb(247, 247, 247) ,
    rgb(247, 247, 247) 15px,
    rgb(225, 234, 235) 15px,
    rgb(225, 234, 235) 30px,
    rgb(247, 247, 247) 30px
    );
}
#reg_block p.change_link a {
    display: inline-block;
    font-weight: bold;
    background: rgb(247, 248, 241);
    padding: 2px 6px;
    color: rgb(29, 162, 193);
    margin-left: 10px;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid rgb(203, 213, 214);
    transition: all 0.4s  linear;
}
#reg_block p.change_link a:hover {
    color: rgb(57, 191, 215);
    background: rgb(247, 247, 247);
    border: 1px solid rgb(74, 179, 198);
}
#reg_block p.change_link a:active{
    position: relative;
    top: 1px;
}
#overlay {position: absolute; top:0; left:0; width: 100%; background: rgba(0,0,0,0.3); z-index:100;}
#reg_block {width: 600px; height: 400px; position: absolute; top: 50px; background: transparent; display: none; z-index:200;}
.close {z-index:300; display: block; text-align: center; position: relative; top:0; left: 400px;}

Но тут далеко не всё вычищено. style.css я не смотрела. Если Вы туда клали мои стили - уберите, я их положила в reg.css. Футер ведет себя странно - он не затемняется, когда появляется всплывающее окно. Надо будет с этим разобраться.
И еще у Вас там шрифты нестандартные. Они у Вас есть? Или, может, их вообще убрать?

@Курам · 23.11.2014, 16:20 **[ТС]**

Сообщение от ludmila-sv

И еще у Вас там шрифты нестандартные. Они у Вас есть? Или, может, их вообще убрать?

Закомментировал я их. Сначала вручную правил файлы template.html, reg.css как у Вас, потом уже скопировал, но результат одинаковый. В style.css не менял кроме body ничего. У меня нет всплывающего окна, просто происходит переход на страницу reg.html (в эксплорере и в мозилле одинаково). Надо кнопки там еще в кучу и поля собрать

.
Конечно, я не думаю, что первый сайт да еще и с нормально работающими сценариями скриптов, дизайном и т.д., каждый сам может написать. И объяснять у многих нет времени и желания. Никто не говорил, что будет легко

Напрягает ограничение по времени, но преддипломку надо сделать.
Может где-то у меня косяки.
reg.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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
#subscribe,
#login{
    position: relative;
    top: 0px;
    width: 88%;
    padding: 20px 6%;
    margin: 0;
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189,0.8);
    box-shadow:
        0pt 2px 5px rgba(105, 108, 109,  0.7),
        0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    border-radius: 5px;
}
#subscribe {display: none;}
 
/**** текст ****/
#reg_block h1{
    font: bold 30px FontomasCustomRegular, Arial,sans-serif;
    color: rgb(6, 106, 117);
    padding: 10px 0;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-align: center;
}
 
/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder  {
    color: rgb(190, 188, 188);
    font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{
    color: rgb(190, 188, 188);
    font-style: italic;
}
input {
  outline: none;
}
/* все поля исключают submit и checkbox */
#reg_block input:not([type="checkbox"]){
    width: 92%;
    margin-top: 4px;
    padding: 5px;
    border: 1px solid rgb(178, 178, 178);
    box-sizing: content-box;
    border-radius: 3px;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    transition: all 0.2s linear;
}
#reg_block input:not([type="checkbox"]):active,
#reg_block input:not([type="checkbox"]):focus{
    border: 1px solid rgba(91, 90, 90, 0.7);
    background: rgba(238, 236, 240, 0.2);
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}
/*@font-face {
    font-family: 'FontomasCustomRegular';
    src: url('fonts/fontomas-webfont.eot');
    src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontomas-webfont.woff') format('woff'),
         url('fonts/fontomas-webfont.ttf') format('truetype'),
         url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}*/
 
/*стилизуем обе кнопки*/
#reg_block p.button input, .close{
    width: 100px;
    cursor: pointer;
    background: rgb(61, 157, 179);
    padding: 5px;
    font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
    color: #fff;
    font-size: 16px;
    border: 1px solid rgb(28, 108, 122);
    margin-bottom: 10px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    box-shadow:
        0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
        0px 0px 0px 3px rgb(254, 254, 254),
        0px 5px 3px 3px rgb(210, 210, 210);
    transition: all 0.2s linear;
}
.close, #reg_block p.button input:hover{
    background: rgb(74, 179, 198);
}
.close:active, .close:focus,
#reg_block p.button input:active,
#reg_block p.button input:focus{
    background: rgb(40, 137, 154);
    border: 1px solid rgb(12, 76, 87);
    box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
p.login.button,
p.signin.button{
    text-align: right;
    margin: 0px 25px;
}
/* стилизуем чекбокс "запомнить меня"*/
.keeplogin{
    margin-top: -5px;
}
.keeplogin input,
.keeplogin label{
    display: inline-block;
    font-size: 12px;
    font-style: italic;
}
.keeplogin input#loginkeeping{
    margin-right: 5px;
}
.keeplogin label{
    width: 80%;
}
p.change_link{
    position: relative;
    color: rgb(127, 124, 124);
    left: 10px;
    height: 20px;
    width: 440px;
    padding: 17px 30px 20px 30px;
    font-size: 16px ;
    text-align: right;
    border-top: 1px solid rgb(219, 229, 232);
    border-radius: 0 0  5px 5px;
    background: rgb(225, 234, 235);
    background: repeating-linear-gradient(-45deg,
    rgb(247, 247, 247) ,
    rgb(247, 247, 247) 15px,
    rgb(225, 234, 235) 15px,
    rgb(225, 234, 235) 30px,
    rgb(247, 247, 247) 30px
    );
}
#reg_block p.change_link a {
    display: inline-block;
    font-weight: bold;
    background: rgb(247, 248, 241);
    padding: 2px 6px;
    color: rgb(29, 162, 193);
    margin-left: 10px;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid rgb(203, 213, 214);
    transition: all 0.4s  linear;
}
#reg_block p.change_link a:hover {
    color: rgb(57, 191, 215);
    background: rgb(247, 247, 247);
    border: 1px solid rgb(74, 179, 198);
}
#reg_block p.change_link a:active{
    position: relative;
    top: 1px;
}
#overlay {position: absolute; top:0; left:0; width: 100%; background: rgba(0,0,0,0.3); z-index:100;}
#reg_block {width: 600px; height: 400px; position: absolute; top: 50px; background: transparent; display: none; z-index:200;}
.close {z-index:300; display: block; text-align: center; position: relative; top:0; left: 400px;}

@Курам · 23.11.2014, 16:21 **[ТС]**

template.html

Кликните здесь для просмотра всего текста

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="keywords" content="для поисковых систем">
<meta name="description" content="краткое описание веб-страницы">
<title>Сайт встреч выпускников ФМФ</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="reg.css" />
<!-- Internet Explorer HTML5 enabling script: -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
 
            .clear {
                zoom: 1;
                display: block;
            }
</style>
<![endif]-->
</head>
<body>
<nav>
                        <ul>
                            <li><a href="template.html">Главная</a>
                            </li>
                            <li><a href="#">Структура факультета</a></li>
                            <li><a href="#">Новости</a>
                            <li><a href="#">Выпускники</a><ul>
                            
                            
                            <li><a href="#"> Математика и физика</a></li>
                            <li><a href="#">Математика и информатика</a></li>
                            <li><a href="#">Физика</a></li>
                            <li><a href="#">Физика и информатика</a></li>
                            <li><a href="#">Прикладная математика и информатика</a></li>
                            <li><a href="#">МОАИС</a></li></ul>
                            
                            </li>
                        
                        <li><a href="reg.html" class="show_popup"> Регистрация</a></li>
                        </ul>
                        
                    </li>
                    </li>
                
</nav>
 
 
<section id="page"> <!-- Определяем секцию #page-->
    <header> <!-- Задаем шапку -->
    <h1>Добро пожаловать!</h1>
 
    </header>
 
<!-- Article 1 start -->
    <div class="line"></div>  <!-- разделяющая полоса -->
    <article id="structure"> <!-- Новый тег для статей -->
        <h2>Статья 1</h2>
        <div class="line"></div>
        <div class="articleBody rolling-nav">
            <figure> <!-- тег для отображения картинки для статьи -->
                <a href="statja1">
                <img src="http://tutorialzine.com/img/featured/641.jpg" width="620" height="340" /></a>
            </figure>
            <p></p>
            <p> </p>
        </div>
    </article>
<!-- Article 1 end -->
 
    <footer> <!-- Маркируем футер -->
        <div class="line"></div>
        <p>Copyright 2014 - YourSite.com</p> <!-- Копирайт сайта -->
        <a href="#" class="up">Go UP</a>
        <a href="http://strbsu.ru/" class="by">Ссылка на сайт БашГУ(СФ)</a>
        <a href="mailto:radik-kuram@yandex.ru?subject=Письмо от подписчика">Напишите нам</a>
        <a href="Javascript:window.alert('Пример Javascript кода')">Пример JavaScript</a>
    </footer>
</section> <!-- Закрываем секцию #page -->
 
 
<div id="reg_block">
        <div id="login">
            <form  action="mysuperscript.php" autocomplete="on">
                <h1>Вход на сайт</h1>
                <p>
                    <label for="username" class="uname" data-icon="Ваш e-mail" > Ваш e-mail или имя пользователя </label>
                    <input id="username" name="username" required="required" type="text" placeholder="Введите имя пользователя или e-mail"/>
                </p>
                <p>
                    <label for="password" class="youpasswd" data-icon="Ваш пароль"> Ваш пароль </label>
                    <input id="password" name="password" required="required" type="password" placeholder="Введите пароль" />
                </p>
                <p class="keeplogin">
                    <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
                    <label for="loginkeeping">Запомнить пароль</label>
                </p>
                <p class="login button">
                    <input type="submit" value="Войти" />
                </p>
                <p class="change_link">
                    Вы еще не зарегестрировались?
                    <a href="#" class="to_subscribe" id="to_subscribe">Присоединяйтесь к нам</a>
                </p>
            </form>
        <div class="close">Закрыть</div>
        </div>
 
        <div id="subscribe">
            <form  action="mysuperscript.php" autocomplete="on">
                <h1> Войти </h1>
                <p>
                    <label for="usernamesignup" class="uname" data-icon="u">Ваше имя пользователя</label>
                    <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="Имя пользователя" />
                </p>
                <p>
                    <label for="emailsignup" class="youmail" data-icon="e" > Ваш e-mail</label>
                    <input id="emailsignup" name="emailsignup" required="required" type="text" placeholder="e-mail"/>
                </p>
                <p>
                    <label for="passwordsignup" class="youpasswd" data-icon="p">Ваш пароль </label>
                    <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder=""/>
                </p>
                <p>
                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Пожалуйста, подтвердите пароль </label>
                    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder=""/>
                </p>
                <p class="signin button">
                    <input type="submit" value="Зарегестрироваться"/>
                </p>
                <p class="change_link">
                    Вы уже зарегестрированы?
                    <a href="#" class="to_subscribe" id="to_login">Тогда войдите</a>
                </p>
            </form>
        <div class="close">Закрыть</div>
        </div>
</div>
 
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
    $('a.show_popup').click(function () {
        $('#reg_block').fadeIn(500);
        $("body").append("<div id='overlay'></div>");
        var h = document.body.offsetHeight;
        var w = (document.body.offsetWidth - 600)/2; 
        $('#overlay').css({'height': h+'px'});
        $('#reg_block').css({'margin-left': w+'px'});
        return false;              
    });
    $('div.close').click(function () {
        $('#reg_block').fadeOut(100);
        $('#overlay').remove();
    });
    $('#to_subscribe').click(function () {
        $('#login').hide();
        $('#subscribe').show();
        return false;              
    });
    $('#to_login').click(function () {
        $('#login').show();
        $('#subscribe').hide();
        return false;              
    });
});
</script>
 
</body>
</html>

@Курам · 23.11.2014, 16:21 **[ТС]**

reg.html

Кликните здесь для просмотра всего текста

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="keywords" content="для поисковых систем">
<meta name="description" content="краткое описание веб-страницы">
<title>Регистрация</title>
<link rel="stylesheet" type="text/css" href="reg.css" />
</head>
 
<!-- Internet Explorer HTML5 enabling script: -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
 
            .clear {
                zoom: 1;
                display: block;
            }
</style>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
<div id="container_demo" >
    <!-- спрятанный якорь, чтобы избежать прыжков http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
    <a class="hiddenanchor" id="tosubscribe"></a>
    <a class="hiddenanchor" id="tologin"></a>
    <div id="wrapper">
        <div id="login" class="animate form">
        <script type="text/javascript">
</script>
<a class="show_popup" rel="info" href="reg.html">Регистрация</a>
<div class="popup info">
        <a class="close" href="reg.html" class="show_popup">Закрыть</a>
        <!--здесь что угодно-->                  
         
</div>  
            <form  action="mysuperscript.php" autocomplete="on">
                <h1>Вход на сайт</h1>
                <p>
                    <label for="username" class="uname" data-icon="u" > Ваш e-mail или имя пользователя </label>
                    <input id="username" name="username" required="required" type="text" placeholder="Введите имя пользователя или e-mail"/>
                </p>
                <p>
                    <label for="password" class="youpasswd" data-icon="p"> Ваш пароль </label>
                    <input id="password" name="password" required="required" type="password" placeholder="Введите пароль" />
                </p>
                <p class="keeplogin">
                    <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
                    <label for="loginkeeping">Запомнить пароль</label>
                </p>
                <p class="login button">
                    <input type="submit" value="Войти" />
                </p>
                <p class="change_link">
                    Вы еще не зарегестрировались?
                    <a href="#tosubscribe" class="to_subscribe">Присоединяйтесь к нам</a>
                </p>
            </form>
        </div>
 
        <div id="subscribe" class="animate form">
            <form  action="mysuperscript.php" autocomplete="on">
                <h1> Войти </h1>
                <p>
                    <label for="usernamesignup" class="uname" data-icon="u">Ваше имя пользователя</label>
                    <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="Имя пользователя" />
                </p>
                <p>
                    <label for="emailsignup" class="youmail" data-icon="e" > Ваш e-mail</label>
                    <input id="emailsignup" name="emailsignup" required="required" type="text" placeholder="e-mail"/>
                </p>
                <p>
                    <label for="passwordsignup" class="youpasswd" data-icon="p">Ваш пароль </label>
                    <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder=""/>
                </p>
                <p>
                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Пожалуйста, подтвердите пароль </label>
                    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder=""/>
                </p>
                <p class="signin button">
                    <input type="submit" value="Зарегестрироваться"/>
                </p>
                <p class="change_link">
                    Вы уже зарегестрированы?
                    <a href="#tologin" class="to_subscribe">Тогда войдите</a>
                </p>
                <p style="text-align: center"><button>Закрыть</button></p>
                    
            </form>
        </div>
    </div>
 
</div>
<a href="template.html">Вернуться на главную</a>
</body>
</html>

@ludmila-sv · 23.11.2014, 18:35

Сообщение от Курам

У меня нет всплывающего окна, просто происходит переход на страницу reg.html

Наверно, Вы jquery не подсоединили. У меня всё работает
http://asin-abik.ru/site1/template.html

@Курам · 23.11.2014, 20:10 **[ТС]**

Сообщение от ludmila-sv

Наверно, Вы jquery не подсоединили. У меня всё работает
http://asin-abik.ru/site1/template.html

Точно,у меня же он по-другому называется. Спасибо, только там кнопка зарегестрироваться маленькая, попробую увеличить. А можно где-то скрипт для регистрации откопать, лежат наверно где-то, не все же постоянно его заново набирают.

@ludmila-sv · 23.11.2014, 20:14

Скрипт для регистрации - это php. И Вам нужно будет сервер установить у себя.

@Курам · 23.11.2014, 20:16 **[ТС]**

Насчет этого я в курсе, denwer поставил или какую виртуальную машину лучше использовать в плане простоты управления и интуитивного понимания программы?

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	20.11.2014, 12:30
	Всплывающее окно на JQuery 0

@ludmila-sv 279 / 279 / 62 Регистрация: 28.08.2014 Сообщений: 432
	23.11.2014, 20:14
	Скрипт для регистрации - это php. И Вам нужно будет сервер установить у себя. 1

@Курам 1 / 1 / 1 Регистрация: 12.08.2012 Сообщений: 140
	23.11.2014, 20:16 [ТС]
	Насчет этого я в курсе, denwer поставил или какую виртуальную машину лучше использовать в плане простоты управления и интуитивного понимания программы? 0