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" ); }); });
Comments
Post a Comment