How to use custom modal with ctools and triggered by a button form

Question

I'm using ctools to render my node form. And my quesiton is how to insert the custom style for the popup window. I know how to use the custom style in the text button. but I don't know how to use it in the button form

the code for my button form

function hs_ajax_button_form($cmp_id=NULL)
{
    $form = array();
    $slogan_url='hs_ajax/nojs/slogan/'.$cmp_id;
    $form['url'] = array(
    '#type' => 'hidden',
    // The name of the class is the #id of $form['ajax_button'] with "-url"
    // suffix.
    '#attributes' => array('class' => array('hs-ajax-button-url')),
    '#value' => url($slogan_url),
    );

    $form['ajax_button'] = array(
    '#type' => 'button',
    '#value' => t('New Post'),
    '#attributes' => array('class' => array('ctools-use-modal')),
    '#id' => 'hs-ajax-button',
    );

  return $form;
}

and my trigger code is below

 $button_form=hs_ajax_button_form($campaign_id);

                    $form['PlayerAttendInformation'][$key]['ctools']=array(
                    '#type'=>'markup',
                    '#markup'=>drupal_render($button_form),
                    );

my style is as below

    $sample_style = array(
        'slogan-style' => array(
          'modalSize' => array(
            'type' => 'fixed',
            'width' => 800,
            'height' =>700,
            'addWidth' => 20,
            'addHeight' => 15,
          ),
          'modalOptions' => array(
            'opacity' => .5,
            'background-color' => '#000',
          ),
          'animation' => 'fadeIn',
          'modalTheme' => 'CToolsSampleModal',
          'throbber' => theme('image', array('path' => ctools_image_path('ajax-loader.gif', 'hs_ajax'), 'alt' => t('Loading...'), 'title' => t('Loading'))),
        ),
        );

how can i do that?

Answer 1

Try this:

  $form['ajax_button'] = array(
    '#type' => 'button',
    '#value' => t('New Post'),
    '#attributes' => array('class' => array('ctools-use-modal','ctools-modal-slogan-style')),
    '#id' => 'hs-ajax-button',
    );

Vincent