Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > Модальное окно с Картинкой и текстом


Автор: Rodman 8.4.2009, 09:16
Дароф.

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

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

Автор: comtat 8.4.2009, 10:46
Самый простой способ
Код

<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>
Ссылка в тему http://vvz.nw.ru/Lessons/JavaScript/Objects/window/window_open.htm
Можно использовать возможности фреймворков. Для ExtJS существует Ext.MessageBox

Автор: Rodman 10.4.2009, 22:43
а как это в ПХП вставить?
Код

<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");
    }    
...
?>
можно ли еще какие то параметры передавать, шоб открыть в модальном окне.

Автор: comtat 13.4.2009, 09:22
Цитата(Rodman @  10.4.2009,  22:43 Найти цитируемый пост)
а как это в ПХП вставить?

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

http://vvz.nw.ru/Lessons/JavaScript/Objects/window/window_open.htm

Автор: Rodman 14.4.2009, 21:44
я понял шо не так сформулировал.. я понял как параметры передать... но

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

Автор: comtat 15.4.2009, 08:53
Цитата(Rodman @  14.4.2009,  21:44 Найти цитируемый пост)
или их в этом окне считывать? 

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

Автор: dstorm81 15.4.2009, 11:53
модальном окошке этот продукт с картинкой лучшего качества и полным описанием

истинно верное модальное окно возможно получить только через скрипты (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>

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

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

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

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

жду.. сенкс

Автор: Rodman 15.4.2009, 19:18
dstorm81, и как мне этот пример использовать?

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


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

Автор: bars80080 15.4.2009, 20:22
Цитата(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);

...

Автор: dstorm81 16.4.2009, 07:39
Rodman
мне кажется что меня сбило с толку ваше "модальное окно" smile
вариант с target="_blank" в вашем случае будет уместнее (см код bars80080 )
вариант же с открытием окна без тулбаров не есть хороший тон (свойственно для всякий варезных и порно сайтов)

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)