Jquery Mobile Dialog with Page element

I'm trying to make the header button of an app launch an embedded form on a page. Any ideas if this is possible or if not what the manual JS would look like to achieve it?

<div data-role="header" class="ui-header ui-bar-a" role="banner">
  <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Devices</h1>
  <a class="ui-btn-right ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-down-a ui-btn-up-a" data-icon="gear" data-rel="dialog" data-transition开发者_运维百科="flip" href="#filter_form" data-theme="a"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Options</span><span class="ui-icon ui-icon-gear ui-icon-shadow"></span></span></a>
</div>
<!-- other page stuff -->
    <div id='filter_form' style='display: none'>
      <h3>Device Criteria</h3>
      <form accept-charset="UTF-8" action="/devices" method="get">
        <div data-role='fieldcontain'>
          ...
        </div>
        <div>
          <button data-theme='a'>Submit</button>
        </div>
      </form>
    </div>
    <script>
      //<![CDATA[
        $(function(){
          $('.show_filter_form').click(function(){
            console.log("in click handler")
            $.mobile.changePage($('#filter_form form'), {transition: 'pop', changeHash: false, role: 'dialog'});
            return false;
          })
        })
      //]]>
    </script>

The click is getting triggered but nothing happens on the page except an unstyled back button showing up in the header.

I've setup a js fiddle for it if you have any ideas: http://jsfiddle.net/BHMmP/

Regarding your JS coding, dialog will be pop-up once click on ".show_filter_form". But, Where is this element ".show_filter_form"?