JQuery Dialogue - несколько на той же странице

Я пытаюсь реализовать диалоговое окно jquery несколько раз на одной странице - в основном, я хочу показать дополнительную информацию о человеке, когда пользователь нажимает на свое имя.JQuery Dialogue - несколько на той же странице

Я создаю страницу с php.

Я попытался сделать это и частично его обработал, но я могу сделать только первый экземпляр на странице. Можете ли вы указать мне пример, потому что те, что на странице пользовательского интерфейса, не так полезны, поскольку они автоматически появляются при открытии страницы.

Я воздержался от публикации моего кода, поскольку я думаю, что это не тот способ, который можно сделать.

Thaks заранее.

источник

2009-04-07 Rob Y

Следующее должно работать как пример.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<!-- Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7 --> 
<head> 
    <meta http-equiv="Content-Type" content="application/text+html;utf-8"/> 

    <title>Sandbox</title> 

    <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" charset="utf-8" /> 
    <link rel="stylesheet" href="css/print.css" type="text/css" media="print" charset="utf-8" /> 
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
<style type="text/css"> 

</style> 

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("jquery", "1.3.2"); 
    google.load("jqueryui", "1.7.0"); 
</script> 
<script type="text/javascript"> 
google.setOnLoadCallback(function() { 

     $(document).ready(function() { 
     $('.more-text').toggle(); 
     $('.more').click(function() { 
      $(this).parent().next('p').dialog(); 
     }) 


    }); 
}); 
</script> 
</head> 
<body> 
    <div id="container"> 
     <div id="person-1"> 
     <p>Short text for person one <a href="#" class="more">Show more</a></p> 
     <p class="more-text">This is more of the text</p> 
     </div> 
     <div id="person-2"> 
     <p>Short text for person two <a href="#" class="more">Show more</a></p> 
     <p class="more-text">This is more of the text with a longer description that 
     is supposed to go into a popup</p> 
     </div> 
    </div> 
</body> 

</html>

источник

2009-04-07 14:14:07 Steerpike

Спасибо, что нашли время, чтобы сделать все, что Steerpike. IT отлично выглядит как стартер, но, попробовав его, диалоги появляются только при первом нажатии на них, я думаю, что я прочитал еще один ответ об этом где-нибудь, который я буду искать сейчас, но какие-нибудь идеи? –

Это только стрельба, потому что диалог вытягивает разметку из DOM, когда он превращает ее в всплывающее окно. Прямо сейчас я на работе и не успеваю заглянуть в эту проблему. Я знаю, что это возможно, хотя я сделал именно то, что вам нужно в другом проекте, используя аналогичный код для того, что я разместил. – Steerpike

К сожалению, у меня нет доступа к коду, который я написал в данный момент. – Steerpike

Вся информация, что вам нужно это прямо на странице документации UI, вниз дно в закладках с надписью «Options» и «методы». Эти ребята - ваши друзья и расскажут вам (почти) все, что может сделать виджет. Например,

<div id="dialog" title="Basic dialog"> 
    <p>This is the default dialog which is useful for displaying 
     information. The dialog window can be moved, resized and 
     closed with the 'x' icon.</p> 
</div> 
... 
<a href="" onclick="openDialog('Peter Smith', '<p>Peter Smith likes dirt bike riding, mountain climbing and punk music.</p>'); return false;">Peter Smith</a> 
... 
<script type="text/javascript"> 

    $(document).ready(function() { 
     $("#dialog").dialog({ autoOpen: false, modal: true }); 
    }); 

    function openDialog(title, text) { 
     $("#dialog").html(text).dialog('option','title',title).dialog('open'); 
    } 
</script>

источник

2009-04-07 14:56:11 Ajw

Привет, спасибо за ответ, но бит, который отсутствует для выше, заключается в том, как выбрать разные биты текста для разных ссылок. Насколько я могу видеть, это выберет div с идентификатором диалога и всегда откроется, что –

О нас, Peter Smith – Ajw

JQuery Dialogue - несколько на той же странице

ответ

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