Forums / Cotonti / Extensions / Support / jQuery modals in plugins

Hodges
#37404 2013-04-23 20:02

Members

Hi guys,

I want to include a jquery modal window in my plugin, but I'm struggling to make it work as it's my first time playing with js in siena.

Using this demo & source here: http://jqueryui.com/dialog/#modal this is what I've done so far:

  • Copied all js and css files used in the example code to my server (themes/[theme]/js).
  • Inserted the following code into themes/[theme]/[theme].rc.php:
PHP
1
2
3
4
5
6
7
8
9
10
11
12
cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/js/jquery-ui.css');
cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/js/jquery-1.9.1.js');
cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/js/jquery-ui.js');
 
cot_rc_add_embed('modalexample','
    $(function() {
    $( "#dialog-modal" ).dialog({
      height: 140,
      modal: true
    });
  });
  ');
  • Inserted the following lines into my plugin:
PHP
1
2
3
4
5
$plugin_body .= '<div id="dialog-modal" title="Basic modal dialog">
  <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
  
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>';

But no window is loaded and the divs just render ordinarily. Any help on how to achieve this simple javascript trick would be greatly appreciated!

Thank you.