Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Модальное окно с Картинкой и текстом 
:(
    Опции темы
Rodman
Дата 8.4.2009, 09:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


CIO
****


Профиль
Группа: Участник
Сообщений: 6144
Регистрация: 7.5.2006
Где: Ukraine ⇛ Kyiv ci ty

Репутация: нет
Всего: 122
Дароф.

Итак - есть у меня список каталогов (маленькая картинка и название)... как сделать так чтобы при наведении / клике на картинку или текст появлялась в модальном окошке этот продукт с картинкой лучшего качества и полным описанием?

Сенкс
(я не совсем уверен что это JavaScript, так что еси шо перенесите куда надо).


--------------------

Лотереи мира
PM MAIL WWW Skype GTalk YIM MSN   Вверх
comtat
Дата 8.4.2009, 10:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 7
Всего: 71
Самый простой способ
Код

<html>
<script>
function openWnd(elem) {
    window.open('', 'Window '+elem.id, 'height=300,width=300,toolbar=no')
}
</script>
<body>
<a id="prod_1" href="javascript:void(0);" onclick="openWnd(this);">Prod 1</a><br />
<a id="prod_2" href="javascript:void(0);" onclick="openWnd(this);">Prod 2</a><br />
</body>
</html>
Ссылка в тему window.open
Можно использовать возможности фреймворков. Для ExtJS существует Ext.MessageBox


--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
Rodman
Дата 10.4.2009, 22:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


CIO
****


Профиль
Группа: Участник
Сообщений: 6144
Регистрация: 7.5.2006
Где: Ukraine ⇛ Kyiv ci ty

Репутация: нет
Всего: 122
а как это в ПХП вставить?
Код

<script>
        function openWnd(elem) 
        {
            window.open('', 'Window '+elem.id, 'height=300,width=300,toolbar=no')
        }
    </script>
<?
....
while ($Row = mysql_fetch_array ($Result)) 
    {
        print ("<TR>\n");//вот у меня есть картинка и название продукт 
            print "<TD align='center'><a id=$Row[3] href=\"javascript:void(0);\" onclick=\"openWnd(this);\" /a>$Row[0]<br><img src='$Row[2]'/></TD>\n";
            print "<TD>$Row[1]</TD>\n";
            
        print ("</TR>\n");
    }    
...
?>
можно ли еще какие то параметры передавать, шоб открыть в модальном окне.

Это сообщение отредактировал(а) Rodman - 10.4.2009, 22:50


--------------------

Лотереи мира
PM MAIL WWW Skype GTalk YIM MSN   Вверх
comtat
Дата 13.4.2009, 09:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 7
Всего: 71
Цитата(Rodman @  10.4.2009,  22:43 Найти цитируемый пост)
а как это в ПХП вставить?

да, примерно так 
Цитата(Rodman @  10.4.2009,  22:43 Найти цитируемый пост)
можно ли еще какие то параметры передавать, шоб открыть в модальном окне.

http://vvz.nw.ru/Lessons/JavaScript/Object...window_open.htm


--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
Rodman
Дата 14.4.2009, 21:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


CIO
****


Профиль
Группа: Участник
Сообщений: 6144
Регистрация: 7.5.2006
Где: Ukraine ⇛ Kyiv ci ty

Репутация: нет
Всего: 122
я понял шо не так сформулировал.. я понял как параметры передать... но

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


--------------------

Лотереи мира
PM MAIL WWW Skype GTalk YIM MSN   Вверх
comtat
Дата 15.4.2009, 08:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 7
Всего: 71
Цитата(Rodman @  14.4.2009,  21:44 Найти цитируемый пост)
или их в этом окне считывать? 

В окне, тебе нужно будет передать только один параметр - инд-р товара


--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
dstorm81
Дата 15.4.2009, 11:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


бездельник
***


Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 2
Всего: 39
модальном окошке этот продукт с картинкой лучшего качества и полным описанием

истинно верное модальное окно возможно получить только через скрипты (ajax)
хотя в вашем случае, судя по вашем манере писать хтмл код, можно извернуться и провернуть все через iframe

вот как один пример такого
Код

<html>
<head>
<style>
#allcont{display:block}
#modLay{display:none;background-color:red;width:100%;height:100%}
#modIfr{width:100%;height:50%}
</style>
</head>
<body>
<div id="modLay">
<iframe id="modIfr" src=""></iframe>
<input type="button" onclick="modwin(false)" value="закрыть">
</div>
<div id="allcont">
<table>
<tr><td><a href="show.php?id=2" onclick="modwin(this);return false;">ссылко</a></td></tr>
<tr><td><a href="show.php?id=3" onclick="modwin(this);return false;">ссылко</a></td></tr>
<tr><td><a href="show.php?id=4" onclick="modwin(this);return false;">ссылко</a></td></tr>
<tr><td><a href="show.php?id=5" onclick="modwin(this);return false;">ссылко</a></td></tr>
</table>
</div>
<script>
var modwin=function(m)
{
document.getElementById("allcont").style.display=(m)?'none':'block';
document.getElementById("modLay").style.display=(m)?'block':'none';
document.getElementById("modIfr").src=(m)?m.href:' ';

}
</script>
</body>
</html>



--------------------
на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)
PM   Вверх
Rodman
Дата 15.4.2009, 17:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


CIO
****


Профиль
Группа: Участник
Сообщений: 6144
Регистрация: 7.5.2006
Где: Ukraine ⇛ Kyiv ci ty

Репутация: нет
Всего: 122
Цитата(dstorm81 @  15.4.2009,  11:53 Найти цитируемый пост)
истинно верное модальное окно возможно получить только через скрипты (ajax)
хотя в вашем случае, судя по вашем манере писать хтмл код,

а можно примерчек на AJAX???

для сравнения...

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

жду.. сенкс


--------------------

Лотереи мира
PM MAIL WWW Skype GTalk YIM MSN   Вверх
Rodman
Дата 15.4.2009, 19:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


CIO
****


Профиль
Группа: Участник
Сообщений: 6144
Регистрация: 7.5.2006
Где: Ukraine ⇛ Kyiv ci ty

Репутация: нет
Всего: 122
dstorm81, и как мне этот пример использовать?

у меня же РНР+БД


мож это просто при помощи РНР можно просто сделать?

Это сообщение отредактировал(а) Rodman - 15.4.2009, 19:57


--------------------

Лотереи мира
PM MAIL WWW Skype GTalk YIM MSN   Вверх
bars80080
Дата 15.4.2009, 20:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315
Цитата(Rodman @  15.4.2009,  19:18 Найти цитируемый пост)
мож это просто при помощи РНР можно просто сделать?

в принципе решение вокруг этого и витало

по сути здесь не нужен ни аякс, ни даже javascript

каждый товар (картинка и название) обрамляются следующей ссылкой:

Код

<a href="http://server.ru/podrobnee.php?id=17" target="_blank">Зубные щётки <img src="..." /></a>

где линк формируется из товара:

Код

echo '<a href="http://server.ru/podrobnee.php?id='.$r['id'].'" target="_blank">'.$r['title'].' <img src="'.$r['img'].'" /></a>';


где $r - строчка из БД

в случае перехода по ссылке в скрипте podrobnee.php оказывается переменная $_GET['id'], через которую мы вытаскиваем данные о товаре и генерируем страницу с подробным описанием

Код

if(!empty($_GET['id'])) $id = intval($_GET['id']); else {
    echo 'неверный адрес'; exit;
}
$sql = 'select * from goods where id='.$id;
$r = mysql_query($sql);

...
PM MAIL WWW   Вверх
dstorm81
Дата 16.4.2009, 07:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


бездельник
***


Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 2
Всего: 39
Rodman
мне кажется что меня сбило с толку ваше "модальное окно" smile
вариант с target="_blank" в вашем случае будет уместнее (см код bars80080 )
вариант же с открытием окна без тулбаров не есть хороший тон (свойственно для всякий варезных и порно сайтов)

то есть вас как отца мировой демократии это должно спасти
a href="http://server.ru/podrobnee.php?id=17" target="_blank"






--------------------
на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)
PM   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0820 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.