I am trying to bring a Dialog Box using jQuery-UI where I am facing one issue. 
Dialog box is opened in screen with its Tiltle and close button.However I am not able to close the dialog.I understand the issue is, the `dialog opened is not recognized` and hence the close button is not working.I am able to select elements in parent page which should not happen. 
I done several researches in Google and could not find a solution for that. 
Please help me to sort out this issue. I am pretty new into Java Scripts and jQuery.

The following are my codes.

Using `jQuery UI - v 1.9.0.`

HTML code
=========

```
<div id="dialog">
  <p>This is test Dialog Box Message !!</p>
</div>

```

Controller.js
=============

There is a button in my page and inside of this button click event,I have

```
 $("#dialog").dialog({
     autoOpen: false,
     title: "Test Tiltle",
     height: 300,
     width: 350,
     modal: true,
     show: 'fade',
     hide: 'fade',
     close : function() {
       $(this).dialog( "close" );
     }

   });

 $("#dialog").dialog( "open" );

```