HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251" />
<title>Модальные всплывающие окна на CSS3 | pcvector.net</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link href="css/modal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="start.js?1.02"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<!-- panel with buttons -->
<div class="main">
<div class="panel">
<a href="#join_form" id="join_pop">Зарегистрироваться</a>
</div>
</div>
<!-- popup form #2 -->
<a href="#x" class="overlay" id="join_form"></a>
<div class="popup" style="width: 600px;">
<div style="margin-left: 47px;"><img src="new_images/text_pop.png" width="485" height="31" border="0"></div>
<p><table width="598" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="90" colspan="3" align="center" valign="bottom" class="text_18_sh"><div style="margin-top: 24px; font-family: Arial, Tahoma; font-style: normal; margin-bottom: 14px; font-size: 20px; color: #fff600;">Вам нужно немедленно активировать ролик, активация<br>
происходит путём ввода пинкода,
после активации<br>
вы получите полный ролик и можете скачать на память:</div></td>
</tr>
<tr>
<td height="12" colspan="3"></td>
</tr>
<tr>
<td width="13" height="40"></td>
<td width="421" align="left" valign="top"><span class="text_32_sh">1. </span><span class="text_24_sh">Пинкод - всего за 25 рублей!</span></td>
<td width="164" align="left" valign="middle"><a href="http://www.oplata.info/asp/pay_wm.asp?id_d=1694182&movie_id={movie_id}&token={token}{ai}" target="_blank"><img src="new_images/pay.png" width="150" height="40" alt="Приобрести" border="0"></a></td>
</tr>
<tr>
<td height="40"> </td>
<td height="40" align="left" valign="top"><span class="text_32_sh">3.</span><span class="text_24_sh"> Пинкода - всего за 65 рублей</span></td>
<td height="40" align="left" valign="middle"><a href="http://www.oplata.info/asp/pay_wm.asp?id_d=1704407&movie_id={movie_id}&token={token}{ai}" target="_blank"><img src="new_images/pay.png" width="150" height="40" alt="Приобрести" border="0"></a></td>
</tr>
<tr>
<td height="40"> </td>
<td height="40" align="left" valign="top"><span class="text_32_sh">5.</span><span class="text_24_sh"> Пинкодов - всего за 105 рублей</span></td>
<td height="40" align="left" valign="middle"><a href="http://www.oplata.info/asp/pay_wm.asp?id_d=1704408&movie_id={movie_id}&token={token}{ai}" target="_blank"><img src="new_images/pay.png" width="150" height="40" alt="Приобрести" border="0"></a></td>
</tr>
<tr>
<td height="40"> </td>
<td height="40" valign="top"><span class="text_32_sh">10.</span> <span class="text_24_sh">Пинкодов - всего за 155 рублей</span></td>
<td height="40" align="left" valign="middle"><a href="http://www.oplata.info/asp/pay_wm.asp?id_d=1704409&movie_id={movie_id}&token={token}{ai}" target="_blank"><img src="new_images/pay.png" width="150" height="40" alt="Приобрести" border="0"></a></td>
</tr>
<tr>
<td height="40"> </td>
<td height="40" valign="top"><span class="text_32_sh"><span class="text_32_sh">50</span>.</span><span class="text_24_sh"> Пинкодов - всего за 310 рублей</span></td>
<td height="40" align="left" valign="middle"><a href="http://www.oplata.info/asp/pay_wm.asp?id_d=1705666&movie_id={movie_id}&token={token}{ai}" target="_blank"><img src="new_images/pay.png" width="150" height="40" alt="Приобрести" border="0"></a></td>
</tr>
<tr>
<td height="100" colspan="3" align="center" valign="top"><form onSubmit="check_pin(this.pin.value); return false">
<input name="pin" type="text" id="#pin" style="width: 350px; height: 30px; border: 1px solid #06F; font-size: 22px; margin-top: 6px; margin-bottom: 12px;" onClick="if(this.value=='Введите пинкод сюда...')this.value=''" onBlur="if(this.value=='')this.value='Введите пинкод сюда...'" value="Введите пинкод сюда..."><br>
<span class="text_promo" style="font-family: Arial, Tahoma;">У НАС АКЦИЯ<span style="font-size: 20px">!</span> Только ДО <span style="font-size: 20px">20</span>-ГО АПРЕЛЯ И ТОЛЬКО <span style="font-size: 20px">20 </span>промо-кодов<br>
НА СКИДКУ В <span style="font-size: 20px">12</span>% ПРИ ПОВТОРНОЙ ОПЛАТЕ<span style="font-size: 20px">!!!</span></span><br>
<div style="margin-top: 5px;"><input type="image" src="new_images/download_rolik.png"></div>
</form></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
</p>
<div>
</div>
</div>
</body>
</html>
CSS3:
*{
margin:0;
padding:0;
}
.join_pop {
border: 2px solid #aaa;
color: #fff;
display: block;
float: right;
margin-right: 10px;
padding: 5px 10px;
text-decoration: none;
text-shadow: 1px 1px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
.join_pop:hover {
border-color: #eee;
}
.overlay {
background-color: rgba(0, 0, 0, 0.6);
bottom: 0;
cursor: default;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
background-image: url(../new_images/test-form.png);
background-repeat: repeat;
border: 3px solid #fff;
display: inline-block;
left: 50%;
opacity: 0;
padding-top: 1px;
position: fixed;
text-align: justify;
top: 40%;
visibility: visible;
z-index: 10;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
top: 50%;
opacity: 1;
visibility: visible;
width: 580px;
height: 570px;
}
.popup div{
margin-top: 12px;
}
.text_18_sh {
font-size: 18px;
font-family: Arial, Tahoma;
color: #FFF;
text-shadow: 1px 1px 0px #04588e;
filter: dropshadow(color=#004588e,offX=1,offY=1);
border-bottom: 1px dashed #005DAA;
font-style: normal;
line-height: 20px;
}
.text_24_sh {
font-size: 24px;
font-family: Arial, Tahoma;
color: #FFF;
text-shadow: 1px 1px 0px #04588e;
filter: dropshadow(color=#004588e,offX=1,offY=1);
}
.text_32_sh {
font-size: 32px;
font-family: Arial, Tahoma;
color: #FFF400;
text-shadow: 1px 1px 0px #790000;
filter: dropshadow(color=#790000,offX=1,offY=1);
font-weight: bold;
}
.text_promo {
font-size: 16px;
color: #FF0000;
font-weight: bold;
line-height: 20px;
font-family: Arial, Tahoma;
}
Как сделать чтоб окно сразу без нажатия на "Зарегистрироваться" показывалось с затемнением и тд.
Тобишь открыл файл HTML и сразу окно с затемнением.
