How to create a modal dialog in jQuery and prevent scrolling in background

$(document).ready(function() {

$("#dialog").dialog({ autoOpen: false

, modal: true

, buttons:

{

"Cancel": function() {

$(this).dialog("close");

$("body").css("overflow", "auto"); }

, "Save": function() {

$(this).dialog("close");

$("body").css("overflow", "auto"); }

}

});

});

function RenameFile(filename, id) {

$("#OldFilename").html("From: " + filename);

$("#NewFilename").val(filename);

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

$("body").css("overflow", "hidden");

}

<div id="dialog" title="Change Filename">

<p id="OldFilename"><b>From: </b>oldfilename.doc</p>

<p><b>To: </b>

<input id="NewFilename" type="text" style="width:200px" /></p>

</div>

<a style="cursor:hand;text-decoration:underline;color:Blue" onclick="javascript:RenameFile('<%= Html.Encode(doc.FileName) %>',<%= doc.PathID %>)">rename</a>