求助：移除jQuery对话框模态框的ui-widget-overlay遮罩层

我明白你被这个遮罩层问题折腾很久了——明明调了z-index没用，还偏偏跑到对话框前面，想直接移除它对吧？我给你几个针对性的解决方案：

先搞懂核心问题：为什么modal: false还会出现遮罩层？ #

正常来说，jQuery UI对话框设置modal: false时，插件本身不会生成.ui-widget-overlay遮罩层。你遇到的情况大概率是这两种原因：

• 其他脚本（比如你用到的UINestable）在对话框初始化后，偷偷把modal选项改成了true；
• 页面里存在其他模态框的遮罩层，和当前对话框的DOM结构搞混了。

方案1：精准移除当前对话框的关联遮罩层 #

别全局移除所有.ui-widget-overlay（避免影响页面其他模态框），通过DOM关系定位到当前对话框对应的遮罩层再移除：

UINestable.init();
$(function() {
  $( "#dragQueen" ).dialog({
    closeOnEscape: true,
    modal: false,
    open: function () {
      // 找到当前对话框容器的兄弟节点里的遮罩层并移除
      $(this).closest('.ui-dialog').siblings('.ui-widget-overlay').remove();
      // 你的原有样式调整代码
      $('.modal-dialog').addClass( "fixed" );
      $('.ui-dialog-title').css( "display","none" );
      $('.ui-dialog-titlebar-close').css( "display","none" );
    },
  });
});

方案2：用CSS精准隐藏遮罩层 #

如果JS移除的时机不对（比如遮罩层在open事件后才生成），可以用CSS针对性隐藏：
先给对话框加个自定义类：

$( "#dragQueen" ).dialog({
  dialogClass: 'no-overlay-dialog', // 自定义标识类
  closeOnEscape: true,
  modal: false,
  // 其他配置项...
});

然后添加CSS规则：

/* 只隐藏这个对话框对应的遮罩层 */
.no-overlay-dialog + .ui-widget-overlay {
  display: none !important;
  opacity: 0 !important;
}
/* 你的原有样式 */
.fixed { 
  position: absolute !important; 
  padding: 0px !important; 
  width: 300% !important; 
  height: auto !important; 
  margin-left: 25% !important; 
  margin-right: 25% !important; 
  z-index:9999 !important; 
}

方案3：排查脚本执行顺序冲突 #

你的代码先执行了UINestable.init()再初始化对话框，有可能UINestable的逻辑修改了对话框配置。可以尝试延迟对话框初始化，确保其他插件加载完成：

UINestable.init();
$(function() {
  // 延迟100ms初始化，避免和UINestable的逻辑冲突
  setTimeout(function() {
    $( "#dragQueen" ).dialog({
      closeOnEscape: true,
      modal: false,
      open: function () {
        $( ".ui-widget-overlay" ).remove();
        $('.modal-dialog').addClass( "fixed" );
        $('.ui-dialog-title').css( "display","none" );
        $('.ui-dialog-titlebar-close').css( "display","none" );
      },
    });
  }, 100);
});

你可以先试试方案1，这是最直接针对当前问题的，如果还是不行，再排查脚本顺序或者用CSS方案。

内容的提问来源于stack exchange，提问作者Capitan Duke