In the previous post in this series, I showed you how to create a simple modal window popup using the CTools modal framework. In this post, since we've already got a simple setup, we'll dive a little bit deeper into exactly how the modal window is generated. We'll need some of this knowledge before we tackle CTools modal forms in the next post.

As you recall, our module (mymodule) has a brand new hook_menu() implementation which registers a callback at the drupal path 'modal-test-callback'. Let's go to this page using our browser. So if you're site is http://example.com/, take a look at http://example.com/modal-test-callback. You should see some funky text like this:

What are we looking at? These are a set of JSON ajax commands. In other words, these are the commands that tell Drupal to pull up the modal window and display 'Hello World'. From our code before, these commands are generated via ctools_modal_render().

<span style="color: #000000"><span style="color: #0000BB">&lt;?php<br></span><span style="color: #007700">function </span><span style="color: #0000BB">mymodule_modal_callback</span><span style="color: #007700">() {<br>&nbsp; </span><span style="color: #0000BB">ctools_include</span><span style="color: #007700">(</span><span style="color: #DD0000">'ajax'</span><span style="color: #007700">);<br>&nbsp; </span><span style="color: #0000BB">ctools_include</span><span style="color: #007700">(</span><span style="color: #DD0000">'modal'</span><span style="color: #007700">);<br>&nbsp; </span><span style="color: #0000BB">ctools_modal_render</span><span style="color: #007700">(</span><span style="color: #0000BB">t</span><span style="color: #007700">(</span><span style="color: #DD0000">'Modal Window Title'</span><span style="color: #007700">),</span><span style="color: #0000BB">t</span><span style="color: #007700">(</span><span style="color: #DD0000">'Hello World'</span><span style="color: #007700">));<br>}<br></span><span style="color: #0000BB">?&gt;</span></span>

ctools_modal_render() actually prints an array of ajax commands that Drupal's ajax framework understands. If we want, we can use our own commands to do something different.

<span style="color: #000000"><span style="color: #0000BB">&lt;?php<br></span><span style="color: #007700">function </span><span style="color: #0000BB">mymodule_modal_callback</span><span style="color: #007700">() {<br>&nbsp; </span><span style="color: #0000BB">ctools_include</span><span style="color: #007700">(</span><span style="color: #DD0000">'ajax'</span><span style="color: #007700">);<br>&nbsp; </span><span style="color: #0000BB">ctools_include</span><span style="color: #007700">(</span><span style="color: #DD0000">'modal'</span><span style="color: #007700">);<br>&nbsp; </span><span style="color: #FF8000">//ctools_modal_render(t('Modal Window Title'),t('Hello World'));<br>&nbsp; </span><span style="color: #0000BB">$commands</span><span style="color: #007700">[] = </span><span style="color: #0000BB">ajax_command_alert</span><span style="color: #007700">(</span><span style="color: #DD0000">"THIS IS AN ALERT COMMAND"</span><span style="color: #007700">);<br>&nbsp; </span><span style="color: #0000BB">$commands</span><span style="color: #007700">[] = </span><span style="color: #0000BB">ajax_command_after</span><span style="color: #007700">(</span><span style="color: #DD0000">'.ctools-use-modal'</span><span style="color: #007700">,</span><span style="color: #DD0000">"&lt;h1&gt;I JUST ADDED A HEADER&lt;/h1&gt;"</span><span style="color: #007700">);<br>&nbsp; print </span><span style="color: #0000BB">ajax_render</span><span style="color: #007700">(</span><span style="color: #0000BB">$commands</span><span style="color: #007700">);<br>&nbsp; exit;<br>}<br></span><span style="color: #0000BB">?&gt;</span></span>

We've commented out ctools_modal_render() so we can play around with the ajax commands of our choosing. Here I'm using two different ajax commands. The first is ajax_command_alert() which shows a normal browser alert box. This command can sometimes be helpful when debugging. The second command invokes jQuery's 'after'. The first argument is a selector, and the second argument is some content. This command will add the <h1> content after any element with the ctools-use-modal class. Try your modal link now. You should see an alert popup and a big ol' "I JUST ADDED A HEADER" after the link. There's a long list of ajax commands that are part of core Drupal. I invite you to explore them.

The ajax_render() function turns the array of ajax commands into the weird looking JSON output you saw in your browser window earlier. Note that we print that content and exit...we don't want Drupal to display a full html page, so we don't return anything from this function. ctools_modal_render() handles all of this printing and exiting for us, but when we get into ctools_modal_form_wrapper() in the next post, we'll be doing the ajax rendering and printing on our own, so I thought I'd introduce it here.