When the jQuery dialog is on I do not want the user to interact with the background

Question

If the user clicks an external link, the jQuery UI dialog appears with "ok" and "cancel" buttons and when they hit "ok" it should take them to the external site.

Everything is working as expected, but the problem is with the modal:true; when the dialog is on the user is able to work on the background and I want the background to be grayed out when the popup is on.

$(window).on('load', function(){
    $.expr[":"].external = function(a) {
        var linkhn = a.hostname.split('.').reverse();
        var linkHref = linkhn[1] + "." + linkhn[0];
        var domainhn = window.location.hostname.split('.').reverse();
        var domainHref = domainhn[1] + "." + domainhn[0];
        return !a.href.match(/^mailto\:/) && !a.href.match(/^tel\:/) && linkHref !== domainHref;
    };
    $("a:external").addClass("ext_link");
});

$(document).ready(function(){
    jQuery(document).on("click", ".ext_link", function () {
$("<div>Thank you for visiting You are now being taken to an external site. </div>").dialog().attr('id','dialog-confirm').css('display','none');
var link_val = this;
  $('#dialog-confirm').dialog({
   title: "External Link",
      height: "auto",
      width: 410,
    resizable: false,
      modal: false,
    buttons: {
      "Ok": function() {
         window.open( link_val.href); $(this).dialog("close"); $(this).dialog('destroy').remove();
      },
      Cancel: function () {jQuery(this).dialog("close"); $(this).dialog('destroy').remove() ;}
    }
  }).dialog("widget").find(".ui-dialog-titlebar").hide(); 
  return false;
});
});

Answer 1

You can use another div which opens up and covers entire page, the below code is written in such manner.

Not disturbing much of your code, I've added <div> which will be hidden on page load. This <div> will be shown when the popup opens, and same <div> will be hidden when dialog closes.

$(document).ready(function() {
  jQuery(document).on("click", ".ext_link", function() {
    $('#scrLoader').show();
    $("<div>Thank you for visiting You are now being taken to an external site. </div>").dialog().attr('id', 'dialog-confirm').css('display', 'none');
    var link_val = this;
    $('#dialog-confirm').dialog({
      title: "External Link",
      height: "auto",
      width: 410,
      resizable: false,
      buttons: {
        "Ok": function() {
          window.open(link_val.href);
          $(this).dialog("close");
          $(this).dialog('destroy').remove();
        },
        Cancel: function() {
          $('#scrLoader').hide();
          jQuery(this).dialog("close");
          $(this).dialog('destroy').remove();
        }
      }
    }).dialog("widget").find(".ui-dialog-titlebar").hide();
    return false;
  });
});

#scrLoader {
  background-color: #333;
  opacity: 0.8;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 100;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-image: url('your path to a loader gif');
  background-position: center;
  background-repeat: no-repeat;
}

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<input type="button" class="ext_link" value="click me" />
<div id="scrLoader" style="display: none;" hidden="true"></div>

You can also a GIF, like a loader GIF, which will be displayed when that particular div is open, so that user understands that some process is going on.

Hope this helps.