Jquery Dialog Modal:true not working as expected

I am upgrading the jQuery UI version in my project from 1.8.9 to 1.13.2. After upgrading I noticed that the modal is not working as expected. It is not overlaying properly and all the elements behind are selectable. I tried searching everywhere but couldnt find an answer.

Please see my code below:

function contact_show() {
  $("#contact-frame").attr("src", 'static/contacts.html');

  $("#contact-dialog").dialog({
    title: 'Contact',
    resizable: false,
    position: {
      at: "center"
    },
    width: 800,
    height: 310,
    // work around for JQueryUI scroll bars bug in IE
    open: function (event, ui) { 
      $('body').css('overflow', 'hidden'); 
      $('.ui-widget-overlay').css('width', '100%'); 
    },
    close: function (event, ui) { 
      $('body').css('overflow', 'auto'); 
    },
    modal: true
  });
}

I have included jQuery UI and CSS of version 1.13.2 in my code. What am I missing here? Can someone help me on this please.