jQuery dialog UI get closed when click on title

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.