Modal Dialog shows close button when hidden.

[bdparrish]

I create a simple modal dialog based on id of a div container as such $('#accordion-navigation).dialog(). The next line of code is to hide the dialog box from view with the $('#accordion-navigation').hide() function. When navigate to the page it hides the dialog, but it leaves the default close button there.

SCRIPT:

$('#accordion-navgation').accordion({
    active: false,
    autoHeight: false,
    collapsible: true,
    header: 'h4'
});

$('#accordion-navgation').dialog();

$('#accordion-navgation').hide();

MVC HTML:

<div id='navigation-menu'>
  <img src='images/menu-top' />
  <% Html.RenderPartial("NavigationMenu", (ViewData["NavigationModel"] as  NavigationModel).NavigationNodes as IEnumerable) %>
  <img src='images/menu-bottom' />
</div>

MVC PARTIAL:

<div id='accordion-navigation'>
  <h4>Title</h4>
  <div>
    <ul>
      <li><a href='#'>Item 1</a></li>
      <li><a href='#'>Item 2</a></li>
      <li><a href='#'>Item 3</a></li>
    </ul>
  </div>
</div>

[bdparrish]

​http://jsfiddle.net/Cfdat/

[rdworth]

When you turn a div into a dialog it turns that div into the dialog-content element and wraps it in the generated dialog element. If you then call .hide() on that div you're simply hiding the content div in the dialog but leaving the new dialog wrapper element visible. In order to hide the dialog, call the close method

$('#accordion-navgation').dialog("close");