Всплывающее окно на полупрозрачном фоне

[N_Vlad_V]

Видел, что на некоторых сайтах всплывающее окно появляется в центре родительского окна, а само это родительское окно видео в “тумане”. Как это делается?

[alert2006]

Рекомендую воспользоваться библиотекой jQuery. При помощи данной библиотеки можно много чего делать и в том числе окна. На сайте да и в интернете огромное количество плагинов и примеров.

[N_Vlad_V]

А этот эффект имеет какое то устоявшееся название, как например бегущая строка, или слои?

[alert2006]

Если требуется просто всплывающее окно, то http://www.google.com/search?hl=ru&c...indows&spell=1

насчет окно видео в “тумане” не понял что имеется ввиду.

[N_Vlad_V]

Возможно вопрос сформулирован некорректно. Попробую поподробнее.
На открытой в браузере странице нажимаем кнопку (ссылку), по нажатию которой по середине этой исходной странице появляется рамочка с новой информацией, оно не полностью заслоняет родительское окно, при этом информация в родительском окне еле видно, оно в сильном тумане. Так вот каким средством это достигается?

[alert2006]

А, ну всё понял. Скачай библиотеку jQuery и поиском по гуглу ищи jQuery Modal Windows это и есть то что тебе нужно

[N_Vlad_V]

Modal Window - Всплывает окно с вашим содержимым, остальная часть страницы затемняется
описание тут

[alert2006]

да да именно то что нужно.

[N_Vlad_V]

И так, выкладываю образец, использующий библиотеку jQuery решения поставленной задачи. Сама библиотека там же в архиве. Запускаем html файл, щелкаем по ссылкам, наблюдаем эффект. Думаю, те, кто использует JavaScript, без труда поймет по этомуобразцу принцип использования этой библиотеки.

Какими еще средствами, библиотеками можно решить данный вопрос.

А также интересует более легковесное решение.
Не нравится, то что при использовании jQuery придется пользователю при загрузке страницы с информацией в 1,5кб тащить еще и 150 кб скриптов, плата за эффект.

[alert2006]

кстати, на сайте http://turbo.to используется jquery для показа модальных окон.

[Sashock76]

попробовал прикрутить Modal к табличке с товаром, для показа большей размера картинке, но картинки выходят в одном месте сверху списка, неподскажете как сделать чтобы всплывающее окно выходило - напротив картинки по которой щелкают или просто в центре текущего окна?

[alert2006]

Sashock76, код в студию.

[Sashock76]

Цитата: <script type="text/javascript" src="jquery-1.3.2.js"></script> <script> $(document).ready(function() { //select all the a tag with name equal to modal $('a[name=modal]').click(function(e) { //Cancel the link behavior e.preventDefault(); //Get the A tag var id = $(this).attr('href'); //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHei ght}); //transition effect $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); //transition effect $(id).fadeIn(2000); }); //if close button is clicked $('.window .close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#mask').hide(); $('.window').hide(); }); //if mask is clicked $('#mask').click(function () { $(this).hide(); $('.window').hide(); }); }); </script> <style> body { font-family:verdana; font-size:15px; } a {color:#333; text-decoration:none} a:hover {color:#ccc; text-decoration:none} #mask { position:absolute; left:0; top:0; z-index:9000; background-color:#000; display:none; } #boxes .window { position:absolute; left:0; top:0; width:440px; height:200px; display:none; z-index:9999; padding:20px; } #boxes #dialog { width:375px; height:203px; padding:10px; background-color:#ffffff; } </style> ... <tr> <td width="20" align="center" valign="middle"> <a href="#dialog32735" name="modal"><img src="pict\32735.jpg" width="100" height="80"></a> <div style="font-size:10px;color:#ccc"></div> <div id="boxes"> <div id="dialog32735" class="window"> <a href="#" class="close"/>Закрыть</a> <img src="pict\32735.jpg" > </td> <td><blockquote class="style31"> <h1 class="style32">Мозаика Сastorland 20 дет. МАКСИ "Пряничный домик" (680*470)</h1> </blockquote> </td> </tr> <tr> <td width="20" align="center" valign="middle"> <a href="#dialog90481" name="modal"><img src="pict\90481.jpg" width="100" height="80"></a> <div style="font-size:10px;color:#ccc"></div> <div id="boxes"> <div id="dialog90481" class="window"> <a href="#" class="close"/>Закрыть</a> <img src="pict\90481.jpg" > </td> <td><blockquote class="style31"> <h1 class="style32">Мозаика Сastorland 20 дет. МАКСИ "Русалочка" (680*470)</h1> </blockquote> </td> </tr> <tr>

все брал из образца выложенного N_Vlad_V
но почему то затемнения у меня нет, при всплывание окна...


alert2006, не подскажите, где почитать про:
position:
display:
и т.д.

[alert2006]

Sashock76, как нет затемнения? А вообще окно появляется? Div'ы такие же как в примере?

<!-- Start of Login Dialog -->  
<div id="dialog1" class="window">
  <div class="d-header">
    <input type="text" value="username" onclick="this.value=''"/><br/>
    <input type="password" value="Password" onclick="this.value=''"/>    
  </div>
  <div class="d-blank"></div>
  <div class="d-login"><input type="image" alt="Login" title="Login" src="images/login-button.png"/></div>
</div>
<!-- End of Login Dialog -->

по поводу позиционирования рекомендую почитать это http://softwaremaniacs.org/blog/2005...t-positioning/

[Sashock76]

<a href="#dialog32735" name="modal"><img src="pict\32735.jpg" width="100" height="80"></a>
<div style="font-size:10px;color:#ccc"></div>
<div id="boxes">
<div id="dialog32735" class="window">
<a href="#" class="close"/>Закрыть</a> <img src="pict\32735.jpg" >

при щелкание на маленькую картинку - появляется большая.
но проблема в том что, когда щелкаешь на нижней позиции (20), то картинка появляется "где-то" вверху и чтобы ее просмотреть -надо скролить вверх.
как это исправить - чтобы большая появлялась - "рядом" с маленькой, а не вверху.