Компьютерный форум NoWa.cc Здесь может быть Ваша реклама
Правила Форума
редакция от 22.06.2020
Портал .::2BakSa.WS::.
Вернуться   Компьютерный форум NoWa.cc > В помощь вебмастеру > Веб - Программирование > Java Script

Уважаемые пользователи nowa.cc и 2baksa.ws. У нас сложилось тяжёлое финансовое положение. Мы работаем для вас вот уже более 15 лет и сейчас вынуждены просить о помощи. Окажите посильную поддержку проектам. Мы очень надеемся на вас. Реквизиты для переводов ниже.
Webmoney Webmoney WMZ: 826074280762 Webmoney WME: 804621616710
PayPal PayPal_Email E-mail для связи по вопросу помощи
Кошелёк для вашей помощи YooMoney 4100117770549562
YooMoney Спасибо за поддержку!
Ответ
 
Опции темы Опции просмотра Language
Старый 10.08.2009, 08:59   #1
Новичок
 
Пол:Мужской
Регистрация: 05.12.2008
Сообщений: 9
Репутация: 1
По умолчанию Всплывающее окно на полупрозрачном фоне

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


Реклама: Интернет-магазин КНС предлагает TS500GESD260C - более 50-ти тысяч наименований товаров со склада в МосквеКНС Нева рекомендует - вай фай точка - доставкой по Санкт-Петербургу и СЗАОтабурет на винтеРекомендуем гипермаркет КНС.ру - моноблок MSI Pro AP242P 14M-670XRU - билеты на футбол в подарок каждому покупателюсмотреть мастер маргарита 2023


Старый 10.08.2009, 14:52   #2
alert2006
Неактивный пользователь
 
Пол:Мужской
Регистрация: 10.06.2008
Сообщений: 86
Репутация: 22
По умолчанию Re: Всплывающее окно на полупрозрачном фоне

Рекомендую воспользоваться библиотекой jQuery. При помощи данной библиотеки можно много чего делать и в том числе окна. На сайте да и в интернете огромное количество плагинов и примеров.
__________________
<?php if ($url == "nowa.cc") echo "It's a good choice"; exit(); ?>
alert2006 вне форума
 
Ответить с цитированием Вверх
Старый 10.08.2009, 15:15   #3
N_Vlad_V
Новичок
 
Пол:Мужской
Регистрация: 05.12.2008
Сообщений: 9
Репутация: 1
По умолчанию Re: Всплывающее окно на полупрозрачном фоне

А этот эффект имеет какое то устоявшееся название, как например бегущая строка, или слои?
N_Vlad_V вне форума
 
Ответить с цитированием Вверх
Старый 10.08.2009, 15:44   #4
alert2006
Неактивный пользователь
 
Пол:Мужской
Регистрация: 10.06.2008
Сообщений: 86
Репутация: 22
По умолчанию Re: Всплывающее окно на полупрозрачном фоне

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

насчет окно видео в “тумане” не понял что имеется ввиду.
__________________
<?php if ($url == "nowa.cc") echo "It's a good choice"; exit(); ?>
alert2006 вне форума
 
Ответить с цитированием Вверх
Старый 10.08.2009, 19:34   #5
N_Vlad_V
Новичок
 
Пол:Мужской
Регистрация: 05.12.2008
Сообщений: 9
Репутация: 1
По умолчанию Re: Всплывающее окно на полупрозрачном фоне

Возможно вопрос сформулирован некорректно. Попробую поподробнее.
На открытой в браузере странице нажимаем кнопку (ссылку), по нажатию которой по середине этой исходной странице появляется рамочка с новой информацией, оно не полностью заслоняет родительское окно, при этом информация в родительском окне еле видно, оно в сильном тумане. Так вот каким средством это достигается?
N_Vlad_V вне форума
 
Ответить с цитированием Вверх
Старый 10.08.2009, 21:02   #6
alert2006
Неактивный пользователь
 
Пол:Мужской
Регистрация: 10.06.2008
Сообщений: 86
Репутация: 22
По умолчанию Re: Всплывающее окно на полупрозрачном фоне

А, ну всё понял. Скачай библиотеку jQuery и поиском по гуглу ищи jQuery Modal Windows это и есть то что тебе нужно
__________________
<?php if ($url == "nowa.cc") echo "It's a good choice"; exit(); ?>
alert2006 вне форума
 
Ответить с цитированием Вверх
Старый 10.08.2009, 22:03   #7
N_Vlad_V
Новичок
 
Пол:Мужской
Регистрация: 05.12.2008
Сообщений: 9
Репутация: 1
По умолчанию Re: Всплывающее окно на полупрозрачном фоне

Modal Window - Всплывает окно с вашим содержимым, остальная часть страницы затемняется
описание тут
N_Vlad_V вне форума
 
Ответить с цитированием Вверх
Старый 11.08.2009, 01:26   #8
alert2006
Неактивный пользователь
 
Пол:Мужской
Регистрация: 10.06.2008
Сообщений: 86
Репутация: 22
По умолчанию Re: Всплывающее окно на полупрозрачном фоне

да да именно то что нужно.
__________________
<?php if ($url == "nowa.cc") echo "It's a good choice"; exit(); ?>
alert2006 вне форума
 
Ответить с цитированием Вверх
Старый 11.08.2009, 11:46   #9
N_Vlad_V
Новичок
 
Пол:Мужской
Регистрация: 05.12.2008
Сообщений: 9
Репутация: 1
По умолчанию Re: Всплывающее окно на полупрозрачном фоне

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

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

А также интересует более легковесное решение.
Не нравится, то что при использовании jQuery придется пользователю при загрузке страницы с информацией в 1,5кб тащить еще и 150 кб скриптов, плата за эффект.
N_Vlad_V вне форума
 
Ответить с цитированием Вверх
Старый 11.08.2009, 16:03   #10
alert2006
Неактивный пользователь
 
Пол:Мужской
Регистрация: 10.06.2008
Сообщений: 86
Репутация: 22
По умолчанию Re: Всплывающее окно на полупрозрачном фоне

кстати, на сайте http://turbo.to используется jquery для показа модальных окон.
__________________
<?php if ($url == "nowa.cc") echo "It's a good choice"; exit(); ?>
alert2006 вне форума
 
Ответить с цитированием Вверх
Старый 13.08.2009, 10:18   #11
Sashock76
Неактивный пользователь
 
Пол:Мужской
Регистрация: 10.12.2008
Сообщений: 8
Репутация: 1
По умолчанию Re: Всплывающее окно на полупрозрачном фоне

попробовал прикрутить Modal к табличке с товаром, для показа большей размера картинке, но картинки выходят в одном месте сверху списка, неподскажете как сделать чтобы всплывающее окно выходило - напротив картинки по которой щелкают или просто в центре текущего окна?
Sashock76 вне форума
 
Ответить с цитированием Вверх
Старый 13.08.2009, 11:16   #12
alert2006
Неактивный пользователь
 
Пол:Мужской
Регистрация: 10.06.2008
Сообщений: 86
Репутация: 22
По умолчанию Re: Всплывающее окно на полупрозрачном фоне

Sashock76, код в студию.
__________________
<?php if ($url == "nowa.cc") echo "It's a good choice"; exit(); ?>
alert2006 вне форума
 
Ответить с цитированием Вверх
Старый 13.08.2009, 11:49   #13
Sashock76
Неактивный пользователь
 
Пол:Мужской
Регистрация: 10.12.2008
Сообщений: 8
Репутация: 1
По умолчанию Re: Всплывающее окно на полупрозрачном фоне

Цитата:
<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:
и т.д.
Sashock76 вне форума
 
Ответить с цитированием Вверх
Старый 13.08.2009, 12:17   #14
alert2006
Неактивный пользователь
 
Пол:Мужской
Регистрация: 10.06.2008
Сообщений: 86
Репутация: 22
По умолчанию Re: Всплывающее окно на полупрозрачном фоне

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/
__________________
<?php if ($url == "nowa.cc") echo "It's a good choice"; exit(); ?>
alert2006 вне форума
 
Ответить с цитированием Вверх
Старый 13.08.2009, 13:49   #15
Sashock76
Неактивный пользователь
 
Пол:Мужской
Регистрация: 10.12.2008
Сообщений: 8
Репутация: 1
По умолчанию Re: Всплывающее окно на полупрозрачном фоне

Код:
<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), то картинка появляется "где-то" вверху и чтобы ее просмотреть -надо скролить вверх.
как это исправить - чтобы большая появлялась - "рядом" с маленькой, а не вверху.
Sashock76 вне форума
 
Ответить с цитированием Вверх
Ответ


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
помогите убрать всплывающее окно "предупреждение системы безопасности" hadi12 Скорая помощь 21 22.10.2010 01:08
Всплывающее окно(iframe) и обновление данных родительского окна kez AJAX 3 26.11.2009 11:47
Коррупция в ГАИ на фоне ДТП rronin Административное право 24 20.06.2009 20:47
всплывающее окно zloyPrapor Macromedia Flash 0 23.11.2008 22:54

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход


Текущее время: 16:28. Часовой пояс GMT +3.


Copyright ©2004 - 2024 2BakSa.WS

Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2024, vBulletin Solutions, Inc. Перевод: zCarot
Время генерации страницы 0.20790 секунды с 11 запросами