How do I show a Garnish hud in the CP I've written a custom plugin and added a custom button to the right panel of an entry page



Now I'm trying to show a Garnish Hud if I click the red button (like the one when you re-index assets) 



The content of the hud would be two radio buttons and a button which triggers a controller function. It should also show the progress bar and the success icon after the button was clicked (so basically the same behaviour as the assets indexing thing)

I put this code in my plugin specific js file

var hud = new Garnish.HUD($('#generate-pdf'), 'test', {
        orientations: ['top', 'bottom', 'right', 'left'],
        hudClass: 'hud toolhud',
    });


But this shows the hud after page load and the trigger (that's the button with the id #generate-pdf) doesn't work at all.

Can anyone point me in the right direction?
I finally figured this out. I was actually close. 

Here's the HTML that I use

&lt;div class="hud-wrapper hidden"&gt;
    &lt;div id="generate-pdf-form" class="form meta"&gt;
        &lt;form&gt;

            {% import "_includes/forms" as forms %}

            {{ forms.lightswitchField({
                 class: 'docraptorize-prod-lightswitch',
                 name: 'prod-pdf',
                 on: true
            }) }}   

            &lt;input type="submit" class="btn submit" value="{{ "Go!"|t }}"&gt;
        &lt;/form&gt;
    &lt;/div&gt;
&lt;/div&gt;


and this is the corresponding JS

var $btn = $('#generate-pdf-hud'),
$form = $('#generate-pdf-form');

$btn.on('click',function(){
    var hud = new Garnish.HUD($btn, $form, {
        orientations: ['top', 'bottom', 'right', 'left']
    });
   return false;
});