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

YZlat used Ask the Experts™
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>
        <meta charset="utf-8" />
        <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>
            $(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');

                // load content and open dialog
                dlg.load('page2.html?id=' + linkId).dialog('open');

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

Open in new window

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Here is your code (

What I am looking for?


Julian, this is strange, your code does not ass scrollbars but mine does
Most Valuable Expert 2017
Distinguished Expert 2018

Without seeing the code as a link where we can see what is happening have to go on the premise that the code posted is correct and there is something you have not given us.

Can you give us a link?
I figure it out - there were right-aligned controls on the page that should have appeared in the dialog box, so the target page was larger than specified size, hence the scrollbars


resolved it myself

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial