使用 jquery 防止 yii 模态弹出窗口关闭

Posted 2023-03-05

【中文标题】使用 jquery 防止 yii 模态弹出窗口关闭

【英文标题】：Prevent yii modal popup from closing using jquery

【发布时间】：2015-07-17 13:15:58

【问题描述】：

您好，我正在开发一个 yii 框架。我正在使用 Twitter 引导程序，并且我已经使用自定义 ajax 加载了我的弹出窗口，以便在关闭后将它们从 DOM 中删除。

我想防止当用户在上传文件时错误地点击覆盖时弹出窗口关闭。谁能告诉我怎么做？

我发现触发关闭弹出窗口时触发了事件“hide.bs.modal”，但我未能阻止弹出窗口关闭。请帮忙。

@谢谢哈马德。 我找到了这个链接Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?。很好，但我只需要在用户上传文件时关闭它。所以我不能从一开始就将“背景”设置为“静态”。

我有人动态制作了弹出背景：静态。但我无法动态删除背景：静态属性。我试过了 $("#model-id").data('modal').options.backdrop = false; 但这不起作用。当我点击外侧时，我的弹出窗口仍然没有关闭。

请帮忙。

【参考方案1】：

仅当您使用普通引导模式时，选择的答案才有效。与@hamed 的声明相反，如果您实际上将模态调用为 Yii 扩展，那么您应该在构建扩展时指定背景/键盘选项，例如：

\yii\bootstrap\Modal::begin([
    'id' => 'staffWindow',
    'header' => 'Do something',
    'clientOptions' => [
        'backdrop' => 'static'
    ]
]);

【讨论】：

这很好用，也可以防止使用 esc 按钮关闭使用选项 'keyboard' => false

【参考方案2】：

我之前找到了这个解决方案，但在这里为其他遇到这个问题的人写信。这就是我在 Yii 中所做的。

您可以按照@hamed 的建议将其添加到您的代码中。如果用户在叠加层上单击弹出窗口的外侧或按“Esc”键，这将防止弹出窗口关闭。

$('#YourModalID').modal(
   backdrop: 'static',
   keyboard: false
);

或 在模型容器中添加data-backdrop="static" data-keyboard="false"，您在模型弹出窗口中定义了class='model'。如果用户在叠加层上单击弹出窗口的外侧或按“Esc”键，这将防止弹出窗口关闭。

用于动态控制弹出窗口的关闭：

在脚本文件中执行以下操作，将您的功能与'hide.bs.modal' 事件绑定。

//this event is triggered automatically when popup is about to close
element.on('hide.bs.modal', function (e)

if( your condition met )
   e.preventDefault(); // to prevent popup from closing by default
  //do your stuff

else
// let popup close
 
);

【讨论】：

为什么在 yii 中可以使用 jQuery