MVC Jquery Dialog: modal:true prevents the dialog from rendering - asp.net-mvc

Question

I am using MVC2 on VS2010 Express edition.
I Have a (simplified) page that includes RenderPartial for a dialog. The dialog is supposed to pop up when a button is clicked. However, if I include modal:true as one of the dialog options, then when the button is clicked nothing happens. The dialog does not pop up. When I remove modal:true from the dialog options then dialog pops up as expected and closed as expected. Please help. I have sent so much time researching this problem and can't find anything. When at first I had a list several options specified for this dialog and it was not poping up, I removed them one by one to find out if any of them are causing the problem, and sure enough when I removed modal the dialog was rendered on clicking the button. Adding back the option modal: true stopped rendering of the dialog again.
These are in master page:
<link href="<%=ResolveUrl("~")%>App_Themes/smoothness/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<%=Html.Script("~/Scripts/jquery-1.4.2.min.js")%>
<%=Html.Script("~/Scripts/jquery-ui-1.8.2.custom.min.js")%>
<%=Html.Script("~/Scripts/jquery.form.js")%>
This is the page that is initially rendered. The first line in bold is the line for the button that when clicked, it would open the dialog. The second line in bold the line that is supposed to actually render the dialog:
Request Dialog
My Menu
<% Html.RenderPartial("get_dlg", ViewData.Model.FName); %>
This is the entire code for the dialog page (get_dlg). As such, the dialog does not show up when the button is clicked. Removing the line in bold will some reason allow the dialog to be rendered!
<script type="text/javascript">
$(document).ready(function () {
$("#get_dlg").dialog({
title: 'Get Dialog',
autoOpen: false,
modal: true
});
$('#requestDialog').click(function () {
$('#get_dlg').dialog("open");
})
});
</script>
show me something!
Any suggestions please?

Answer 1

I got help from someone on ASP.NET Forum: it is a CSS problem. adding the following to the ascx (view) fixed the problem:
<style type="text/css">
.ui-widget-overlay {
background-color: #000000;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
}
.ui-dialog {
background-color: #FFFFFF;
border: 1px solid #505050;
position: absolute;
overflow: hidden;
}
</style>