jQuery dialog UI get closed when click on title

Question

I'm using this below code for one of my website. I know there have lot of ways to create a dialog boxes. But for a some reason, I need to follow these structure.

//On click trigger a popup box 
$('#terms').click(function(e){
    popupBox(e);
});
//Create a Popup Box 
function popupBox(e){            
    e.preventDefault();
    $('body').width($('body').width());
    $('body').css('overflow', 'hidden');
    $('<div id="popupbox" title="Terms and Conditions"><!-- popupbox - Edit by Yesh  --></div>').appendTo('body')
    .html('<div><h1>Lorem Ipsum Title</h1></div><div><p>Lorem ipsum dolar sit amet </p></div><div><small>Read it before accept</small></div>')
    .dialog({
        modal: true, title: 'Terms and Conditions', zIndex: 9999, autoOpen: true,
        width: '60%', resizable: false,
        close: function (e) {
            e.preventDefault();
            $(this).remove();
            $('body').css('overflow', 'auto');
        },
    });
}

Problem is when I click on the Title. It's get hidden (not closed). So, how to fix it?

Here my JSFIDDLE is working fine.

Answer 1

The problem is related to vertical scrolling.

You're probably scrolled down on the page when you open the dialog. When you then click the title bar of the dialog to drag it, the dialog jumps further down the page, usually hidden from view. The only way to get it to close is to press Esc. Your JSFiddle doesn't show the problem because it's not vertically tall enough to require scrolling.

Here's a modified version of your JSFiddle with vertical space added to illustrate the problem.

The solution, as described in this post, is to change the style of the dialog from position: absolute to position: fixed:

.ui-dialog { position: fixed; }

Here's another JSFiddle with the problem fixed.

Answer 2

It is near impossible to answer when there is no way to reproduce the issue you are facing. Try narrowing your problem down:

• What browser are you using? Is the behaviour consistent on all browsers?
• If the problem doesn't reproduce in jsfiddle, maybe the problem is not the code you put in jsfiddle. Try giving it more code from your page until the problem shows itself - then remove as much as you can to isolate the bug.

So in short, show us more code.