Geek Answers Handbook

JQuery Dialogue - Multiple On One Page

I am trying to implement the jquery dialog several times on the same page - basically, I want to show additional information about the person when the user clicks on his name.

I am creating a page with php.

I tried to do this and partially worked, but I can only make the first instance on the page. Please, anyone can point me to an example, because the ones on the user interface page are not so useful, because they automatically appear when the page opens.

I refrained from publishing my code as I think this is not the right way to do this.

Thaks in advance.

+4
source share
2 answers

All the information you need is located directly on the user interface documentation page, bottom to bottom on the tabs labeled “Options” and “Methods”. These guys are your friends and will tell you (almost) everything the widget can do. For instance,

<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>
+3
source

The following should work as a valid example.

 <!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>
+1
source

More articles:


All Articles