l17l

kindness:
l17l, ну всё же просто.

Sly32:
У меня на сайте вывод формы запроса реализован примерно так как вы хотите - http://www.trutravel.ru/otdyx-v-belarusi/testovaya/ Нажмите на кнопку [Подобрать коттедж]. Если нравится - скину код

biggo:
это называется лайтбокс. иногда еще называют попап. затемнение называют оверлей


нормальный лайтбокс без js вы не сделаете. хотя если чисто для обучения, то можно заморочиться
вот гляньте как тут сделано http://dbmast.ru/files/lightbox/demo.html

ASDAFF:
Блоки переставь

<div id="mask" class="mask" >

 <div id="calendarstat" style="display:none">

   в разработке

 </div>

</div> 

<div id="statprosmotr">
<div class="statpros">
<a href="#" title="Полная статистика просмотров анкеты по дням" onClick="document.getElementById('statprosmotr').style.display='none';document.getElementById('calendarstat').style.display='';return false;">Статистика просмотров</a></div></div>

<div id="calendarstat" style="display:none">
<div id="mask" class="mask"></div>
в разработке

<div class="statprosh">
<a href="#" title="Закрыть статистику" onClick="document.getElementById('calendarstat').style.display='none';document.getElementById('statprosmotr').style.display='';return false;">Закрыть статистику</a></div>
</div>

Затемнение фона css

.mask {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}

.statpros a{
font-size: 12px;
text-transform: uppercase;
color: #fff;
font-weight: bold;
}
.statpros a:hover{
color: #000;
}
#calendarstat {
z-index: 9000;
position:fixed;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
background: #FFCCE2;
height: 250px;
width: 280px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(50, 50, 50, 0.71);
-moz-box-shadow: 0px 0px 25px 0px rgba(50, 50, 50, 0.71);
box-shadow: 0px 0px 25px 0px rgba(50, 50, 50, 0.71);
border: solid 3px #F16499;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
padding:10px;
}
.statprosh a{
margin-top: 240px;
margin-left: -13px;
float:left;
text-align: center;
width: 300px;
text-transform: uppercase;
font-size: 14px;
color: #fff;
cursor:pointer;
height: 32px;
line-height: 29px;
border:3px solid #F06197;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
-moz-box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
-o-box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
-khtml-box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
background: rgb(240,97,151); /* Old browsers */
background: -moz-linear-gradient(top, rgba(240,97,151,1) 0%, rgba(225,58,121,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,97,151,1)), color-stop(100%,rgba(225,58,121,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(240,97,151,1) 0%,rgba(225,58,121,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(240,97,151,1) 0%,rgba(225,58,121,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(240,97,151,1) 0%,rgba(225,58,121,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(240,97,151,1) 0%,rgba(225,58,121,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f06197', endColorstr='#e13a79',GradientType=0 ); /* IE6-9 */
}
.statprosh a:hover{
background: rgb(255, 220, 239);
background: -moz-linear-gradient(90deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
background: -webkit-linear-gradient(90deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
background: -o-linear-gradient(90deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
background: -ms-linear-gradient(90deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
background: linear-gradient(0deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
color: #000;
}

<div id="statprosmotr">
<div class="statpros">
<a href="#" title="Полная статистика просмотров анкеты по дням" onClick="document.getElementById('statprosmotr').style.display='none';document.getElementById('mask').style.display='';return  false;">Статистика просмотров</a></div></div>
 
<div id="mask" class="mask" style="display:none">  
<div id="calendarstat">
в разработке
 
<div class="statprosh">
<a href="#" title="Закрыть статистику"  onClick="document.getElementById('mask').style.display='none';document.getElementById('statprosmotr').style.display='';return  false;">Закрыть статистику</a></div>
</div>

<div id="calendarstat" style="display:none">
<div id="mask" class="mask"></div>
в разработке
</div>

Imitator:
l17l, зачем придумывать велосипед, если на данный момент есть множество приличных готовых библиотек, которые подключил и забыл? А главное - они работают с большинством браузеров и устройств. Лично мне нравится colorbox, хотя аналогов предостаточно.

Дикий пионер:
Это не про скрипт, это про включенный в браузере способ загрузки файлов: fileapi.
Не думаю, что вы найдете скрипт, который поддерживает _значитально_ больше бразуеров - думаю разница, если и будет, то в пределах нескольких процентов.
Как правило такие скрипты-загрузчики имеют fallback'и до флеша или обычной формочки в случае неподдерживаемости браузером модных фишек.