главная

Теги:


Всплывающее окно в стиле Facebook

В данном уроке Вы научитесь создавать красивое всплывающее окно в стиле Facebook. Оно очень красиво выглядит и подойдет к любому сайту. Для эффектов используется Mootools.

Итак, нам понадобится:

Mootools Javascript

Данный код необходимо вставить между тегами . Также важно указать верный путь к фреймворку Mootools.


  

CSS

Большая часть оформления взята непосредственно с Facebook.

/* from facebook */

     .generic_dialog { height:0; left:0; overflow:visible; position:fixed; /*dw*/ top:0; width:100%; z-index:101; }
    #generic_dialog_iframe { left:0; position:absolute; top:0; z-index:3; }
    .generic_dialog .generic_dialog_popup { height:0; overflow:visible; position:relative; }
    .generic_dialog div.dialog_loading 		{ background-color:#F2F2F2; border:1px solid #606060; font-size:24px; padding:10px; }
    #generic_dialog_overlay { display:block; left:0; position:absolute; top:0; width:100%; z-index:100; }
    .dialog_body .dialog_content_img { float:left; margin-right:15px; }
    .dialog_body .dialog_content_txt { float:left; padding-bottom:5px; width:300px; }
    .dialog_body .dialog_content_body { padding-bottom:13px; } 
    .dialog_body .form_label { padding-right:5px; }
    .dark_dialog_overlay { background-image:url(facebook-overlay.png); background-repeat:repeat; }
    * html .dark_dialog_overlay { background-color:transparent; background-image:url(blank.gif); }
    .full_bleed .pop_dialog_table td.pop_content .dialog_body { padding:0; } 
    table.pop_dialog_table { border-collapse:collapse; direction:ltr; margin:auto; table-layout:fixed; width:465px; }
    td.pop_topleft, td.pop_topright, td.pop_bottomleft, td.pop_bottomright { height:10px; overflow:hidden; padding:0 
!important; width:10px !important; }
    td.pop_topleft { background:transparent url(facebook-pop-dialog-sprite.png) no-repeat scroll 0 0; }
    td.pop_topright { background:transparent url(facebook-pop-dialog-sprite.png) no-repeat scroll 0 -10px; }
    td.pop_bottomleft { background:transparent url(facebook-pop-dialog-sprite.png) no-repeat scroll 0 -20px; }
    td.pop_bottomright { background:transparent url(facebook-pop-dialog-sprite.png) no-repeat scroll 0 -30px; }
    td.pop_top, td.pop_bottom { background:transparent url(facebook-pop-dialog-sprite.png) repeat-x scroll 0 -40px; }
    td.pop_side { background:transparent url(facebook-pop-dialog-sprite.png) repeat-y scroll -10px 0; }
    td.pop_content { background-color:white; direction:ltr; padding:0; }
    .pop_dialog_rtl td.pop_content { direction:rtl; }
    td.pop_content h2.dialog_title { background:#6D84B4 none repeat scroll 0 0; border:1px solid #3B5998; color:white; 
font-size:14px; font-weight:bold; margin:0; }
    td.pop_content h2.dialog_loading { background:#6D84B4 url(facebook-indicator_white_small.gif) no-repeat scroll 400px 10px;
 padding-right:40px; }

    td.pop_content h2 span { display:block; padding:4px 10px 5px; }
    td.pop_content .dialog_content { background:#FFFFFF none repeat scroll 0 0; border-color:#555555; border-style:solid;
 border-width:0 1px 1px; }
    td.pop_content .dialog_body { border-bottom:1px solid #CCCCCC; padding:10px; }
    td.pop_content .dialog_summary { background:#F2F2F2 none repeat scroll 0 0; border-bottom:1px solid #CCCCCC; padding:8px 10px; }
    td.pop_content .dialog_buttons { background:#F2F2F2 none repeat scroll 0 0; padding:8px; text-align:right; }
    td.pop_content .dialog_buttons input { margin-left:5px; }
    td.pop_content .dialog_buttons_msg { float:left; padding:5px 0 0; }
    td.pop_content .dialog_footer { background:#F2F2F2 none repeat scroll 0 50%; }
 
  /* david walsh custom */
 
    #fb-modal	{ display:none; }
    #fb-close	{ cursor:pointer; }
    .info		{ width:280px; float:left; font-size:11px; color:#666; }
    .info b	{ color:#000; }
    .image	{ width:200px; float:left; margin-right:10px; }

HTML

Тут мы прописываем что-именно будет появляться во всплывающем окне. HTML код находится на странице, но отображается только в появившемся окне.

David Walsh

You must be friends with David Walsh to see their full profile.

David Walsh

About David Walsh
David Walsh, Web Developer

I'm a 25 year old Web Developer planted in Madison, Wisconsin.

I am Founder and Lead Developer for Wynq Web Labs. I don't design the websites, I just make them work.

Также для корректной работы нам понадобиться несколько изображений. Все они находятся в архиве вместе со всеми файлами.

Все готово! Пользуйтесь, на здоровье и на радость :).

Источник урока: www.davidwalsh.name

Урок Создан:2011-02-10 Просмотров:1968

Добавить комментарий:


Copyright© 2009 Hosted by Zhost