javascript - applying jQuery UI dialog to classes -


having trouble getting example work classes. have classes each bring separate dialog box different information in them when clicked...https://jqueryui.com/dialog/#animated

here fiddle , code.

html...

<div class="foo">click me   <div class="bar">blahblahblah</div> </div>  <div class="foo">or me   <div class="bar">blahblahblah</div> </div> 

jquery...

$( function() {     $( ".bar" ).dialog({       autoopen: false,       show: {         effect: "blind",         duration: 1000       },       hide: {         effect: "explode",         duration: 1000       }     });      $( ".foo" ).click(function() {       $(this).find(".bar").dialog( "open" );     }); }); 

you may not able use jquery ui dialog using class open dialog way in code because $(this).find(".bar") return empty , not exist.

try using id inner div elements.

<div class="foo" data-id="x1" >click me   <div class="bar" id="x1" >blahblahblah x1</div> </div>  <div class="foo" data-id="x2" >or me   <div class="bar" id="x2" >blahblahblah x2</div> </div> 

--

$( function() {     $( ".bar" ).dialog({       autoopen: false,       show: {         effect: "blind",         duration: 1000       },       hide: {         effect: "explode",         duration: 1000       }     });      $( ".foo" ).click(function() {       var id = $(this).data("id");       $('#'+id).dialog( "open" );     }); }); 

jsfiddle


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -