Модальные окна «VK» и «Одноклассники»

Рейтинг:5.0

Новые модальные окна «VK» и «Одноклассники» для вашего сайта. Окна в основном подойдут для сайтов синего или оранжевого цвета, но кто захочет может поменять цвет на любой другой, это не составит особого труда и займет 5 сек)) Ну вообщем на скрине видно как выглядят данные окна, описывать тут нечего))

Установка:

1) Окна «Одноклассники»:

Вставляете куда вам надо:

Code

<a href="javascript://" onclick="otkritOdnoklassnikiWebo4kaRu();">открыть окно Одноклассники</a>

<div id="odnoklassnikiPositchiiOknaWebo4kaRu">
<div id="odnoklassnikiTitleWebo4kaRu"><p>Одноклассники</p></div>
<div id="odnoklassnikiKontentWebo4kaRu">
<div id="odnoklassnikiTextWebo4kaRu"><p>гуляю на webo4ka.ru</p></div>
</div>
<div id="odnoklassnikiNizWebo4kaRu">
<div id="odnoklassnikiButtonWebo4kaRu"><button onclick="zakritOdnoklassnikiWebo4kaRu();">Закрыть</button></div>
</div>
</div>
<style>
#odnoklassnikiPositchiiOknaWebo4kaRu {background: #fff; width: 610px; position: absolute; top:25%; left:25%; box-shadow: 0 0 8px #777; -moz-box-shadow: #777 0px 0px 25px; -webkit-box-shadow: #777 0px 0px 25px; box-shadow: #777 0px 0px 25px; z-index:999; display:none;}
#odnoklassnikiTitleWebo4kaRu{background: #ed812b; color: white; font-size: 15pt; padding: 5px 0px 5px 30px;}
#odnoklassnikiKontentWebo4kaRu {border-bottom: #888 solid 1px; padding:20px;}
#odnoklassnikiTextWebo4kaRu {background: #f6f7f6; border: #dbe0ea solid 1px; padding:10px; margin-bottom:10px;}
#odnoklassnikiNizWebo4kaRu {background: #f6f7f6; border-top: #dbe0ea solid 1px; padding: 10px; font-size: 12px; text-align: right;}
#odnoklassnikiButtonWebo4kaRu button {background-color: #ed812b; border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-style: solid; padding: 4px 14px; color: white; font-size: 11px; font-family: "tahoma"; margin: 0px; cursor: pointer;}
</style>
<script>
function otkritOdnoklassnikiWebo4kaRu(){$('#odnoklassnikiPositchiiOknaWebo4kaRu').fadeIn('slow'); $('body').css({'overflow':'hidden'});}
function zakritOdnoklassnikiWebo4kaRu(){$('#odnoklassnikiPositchiiOknaWebo4kaRu').fadeOut('slow'); $('body').css({'overflow':'auto'});}
</script

>

2) Окна «VK»:

Вставляете куда вам надо:

Code

<a href="javascript://" onclick="otkritVKWebo4kaRu(); ">открыть окно VK</a>

<div id="vKPositchiiOknaWebo4kaRu">
<div id="vKTitleWebo4kaRu"><p>VK</p></div>
<div id="vKKontentWebo4kaRu">
<div id="vKTextWebo4kaRu"><p>гуляю на webo4ka.ru</p></div>
</div>
<div id="vKNizWebo4kaRu">
<div id="vKButtonWebo4kaRu"><button onclick="zakritVKWebo4kaRu();">Закрыть</button></div>
</div>
</div>
<style>
#vKPositchiiOknaWebo4kaRu {background: #fff; width: 610px; position: absolute; top:25%; left:25%; box-shadow: 0 0 8px #777; -moz-box-shadow: #777 0px 0px 25px; -webkit-box-shadow: #777 0px 0px 25px; box-shadow: #777 0px 0px 25px; z-index:999; display:none;}
#vKTitleWebo4kaRu{background: #5b7b9f; border: #43658a solid 1px; color: white; font-size: 15pt; padding: 5px 0px 5px 30px;}
#vKKontentWebo4kaRu {border-bottom: #888 solid 1px; padding:20px;}
#vKTextWebo4kaRu {background: #f6f7f6; border: #dbe0ea solid 1px; padding:10px; margin-bottom:10px;}
#vKNizWebo4kaRu {background: #f6f7f6; border-top: #dbe0ea solid 1px; padding: 10px; font-size: 12px; text-align: right;}
#vKButtonWebo4kaRu button {background-color: #6181a6; border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-style: solid; padding: 4px 14px; color: white; font-size: 11px; font-family: "tahoma"; margin: 0px; cursor: pointer;}
</style>
<script>
function otkritVKWebo4kaRu(){$('#vKPositchiiOknaWebo4kaRu').fadeIn('slow'); $('body').css({'overflow':'hidden'});}
function zakritVKWebo4kaRu(){$('#vKPositchiiOknaWebo4kaRu').fadeOut('slow'); $('body').css({'overflow':'auto'});}
</script>