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

Posted 2023-05-08

【中文标题】当 jQuery 对话框打开时，我不希望用户与背景交互

【英文标题】：When the jQuery dialog is on I do not want the user to interact with the background

【发布时间】：2020-02-15 14:10:25

【问题描述】：

如果用户单击外部链接，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;
);
);

【问题讨论】：

页面上还有什么JS？对于modal: true，在背景上放置了一个图层，可以吞下对话框外的事件。如果这不起作用，那么还有其他事情在起作用。

与此类似 - ***.com/questions/9416556/…

问题是 modal:true 没有按预期工作。它没有在背景上放置图层，即使对话框打开，它也允许用户访问页面。

【参考方案1】：

您可以使用另一个打开并覆盖整个页面的div，下面的代码就是这样编写的。

我添加了<div>，不会打扰您的大部分代码，它将在页面加载时隐藏。这个<div> 将在弹出窗口打开时显示，同样的<div> 将在对话框关闭时隐藏。

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

您还可以使用 GIF，例如加载器 GIF，当特定 div 打开时将显示该 GIF，以便用户了解某些进程正在进行。

希望这会有所帮助。

【讨论】：

谢谢！我已经通过脚本添加了 div，它可以根据需要完美运行。感谢您的帮助！

嘿 Jennis Vaishnav，您能否也查看以下链接，看看您是否对此有任何想法。 ***.com/questions/58492177/….