Solved: After JQuery UI dialog is closed, the page remains grayed out

I have an JQuery UI dialog on my page and it unwanted scrollbars I want to get rid of. Resizing the dialog did not help and neither did setting maxHeight and maxWidth

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
        <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
        <script src="Scripts/jquery-1.6.4.js"></script>
        <script src="Scripts/jquery-ui-1.11.4.js"></script>
        <script>
            $(document).ready(function () {
                $(".hlk1").click(function () {
                    var linkId = $(this).attr("linkID");
                  
                    // initialize dialog
                    var dlg = $("#dialog").dialog({
                        autoOpen: false,
                        modal: true,
                        draggable: false,
                        resizable: false,
                        position: { my: "center", at: "center", of: window },
                        height: 380,
                        width: 530,
                        maxHeight: 450,
                    maxWidth: 600,
                    open: function(){
                        $('body').css('overflow', 'hidden');
                        $('.ui-widget-overlay').css('width', '100%‌');
                        $('.ui-widget-overlay').css('height', '100%');
                    },
                    close: function () {
                        $('body').css('overflow', 'auto');
                        window.location.reload();
                    }
                });

                // load content and open dialog
                dlg.load('page2.html?id=' + linkId).dialog('open');
            });
    });
    </script>
    </head>

    <body>
  
    <a href="#" class="hlk1" linkid="305">Click here</a>
    <br/>
    <a href="#" class="hlk1" linkid="890">Click here</a>
    <br/>
    <div id="dialog"></div>
    </body>
    </html>

Open in new window