pop up display рядом со своими родителями с javascript

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

Я вижу эту функциональность в большом количестве сайта, но я не знаю, как я могу сделать это я видел Jquery UI, но диалог не соответствует моей цели

у вас есть какие-либо идеи

Я только что испытал это, но нет результата:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>title</title> 

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script> 
    $("#hover1").mouseenter(function() { 
    $("#content").fadeIn('fast'); 
}); 

$("#hover1").mouseleave(function() { 
    $("#content").fadeOut('slow'); 
}); 
    </script> 
</head> 
<body> 

    <p id="hover1"> 
    Hover here! 
</p> 
    <div id="content" style="display:none"> 
    Content here! 
</div> 

</body> 
</html>

спасибо

источник

2013-02-21 simonTifo

Это сайт для устранения неполадок, а не поставщик сценариев. Поэтому, если вы попробуете, напишите какой-нибудь скрипт. – 2013-02-21 13:58:12

искренне, я не пробовал, но я говорю это: [http://jqueryui.com/dialog/], но мне это не нравится, потому что я вижу во многих всплывающих окнах, которые открываются рядом с родителями, и они исчезните, когда пользователь переместится в другое место – simonTifo

обертывание изображения с относительной емкостью и поместить внутри абсолютного контейнера (всплывающее окно), показать его (дисплей: блок; из дисплея: нет;) onbly, тогда контейнер для завивки зависает. не забудьте установить z-index для всплывающего окна.

источник

2013-02-21 13:55:20 Vaclovas

Вы должны использовать jQuerymouseenter и mouseleave функции:

<p id="hover1"> 
    Hover here! 
</p> 

<div id="content" style="display:none"> 
    Content here! 
</div> 

$("#hover1").mouseenter(function() { 
    $("#content").fadeIn('fast'); 
}); 

$("#hover1").mouseleave(function() { 
    $("#content").fadeOut('slow'); 
});

http://jsfiddle.net/SzgqR/

Документация

http://api.jquery.com/mouseenter/

http://api.jquery.com/mouseleave/

Редактировать

Не забудьте включить jQuery в вашу страницу.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

источник

2013-02-21 13:57:08

Благодарим вас за предложение, но оно не работает для меня: см. вопрос Я отредактировал сообщение – simonTifo

@simonTifo вы не включили библиотеку jquery. –

–

pop up display рядом со своими родителями с javascript

ответ

Смежные вопросы