当 jQuery 对话框打开时，我不希望用户与背景交互

Question

如果用户单击外部链接，jQuery UI 对话框会显示“确定”和“取消”按钮，当他们点击“确定”时，它应该将它们带到外部站点。

一切都按预期工作，但问题在于modal:true;当对话框打开时，用户可以在背景上工作，我希望在弹出窗口打开时背景变灰。

$(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

您可以使用另一个打开并覆盖整个页面的 div，下面的代码就是这样编写的。不会打扰您的大部分代码，我添加<div>了将在页面加载时隐藏的代码。这<div>将在弹出窗口打开时显示，并<div>在对话框关闭时隐藏。$(document).ready(function() {&nbsp; jQuery(document).on("click", ".ext_link", function() {&nbsp; &nbsp; $('#scrLoader').show();&nbsp; &nbsp; $("<div>Thank you for visiting You are now being taken to an external site. </div>").dialog().attr('id', 'dialog-confirm').css('display', 'none');&nbsp; &nbsp; var link_val = this;&nbsp; &nbsp; $('#dialog-confirm').dialog({&nbsp; &nbsp; &nbsp; title: "External Link",&nbsp; &nbsp; &nbsp; height: "auto",&nbsp; &nbsp; &nbsp; width: 410,&nbsp; &nbsp; &nbsp; resizable: false,&nbsp; &nbsp; &nbsp; buttons: {&nbsp; &nbsp; &nbsp; &nbsp; "Ok": function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.open(link_val.href);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).dialog("close");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).dialog('destroy').remove();&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; Cancel: function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#scrLoader').hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jQuery(this).dialog("close");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).dialog('destroy').remove();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }).dialog("widget").find(".ui-dialog-titlebar").hide();&nbsp; &nbsp; return false;&nbsp; });});#scrLoader {&nbsp; background-color: #333;&nbsp; opacity: 0.8;&nbsp; position: fixed;&nbsp; left: 0px;&nbsp; top: 0px;&nbsp; z-index: 100;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; overflow: hidden;&nbsp; background-image: url('your path to a loader gif');&nbsp; background-position: center;&nbsp; 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>您还可以使用 GIF，例如加载程序 GIF，它会在特定 div 打开时显示，以便用户了解某些进程正在进行中。希望这可以帮助。