AngularJS中的非模态/无模式对话框而不使用jquery-ui答案

【问题标题】：Non-Modal/Modeless Dialogs in AngularJS without using jquery-uiAngularJS中的非模态/无模式对话框而不使用jquery-ui
【发布时间】：2014-08-04 06:11:05
【问题描述】：

我正在尝试在我的 AngularJS 应用程序中创建非模态对话框。

该应用也使用 Bootstrap。

我正在尝试创建一个可拖动的对话框，该对话框保持活动状态，同时可以与背景的其余部分进行交互（非模态定义）。

所以，到目前为止，我一直在使用不符合上述要求的 Bootstrap 模态。

这个库： https://github.com/jwstadler/angular-jquery-dialog-service

正是我所需要的，有一个缺点是使用 JQuery-UI（我不能使用，因为它太大了）

关于如何以最少的依赖实现这一点的任何指针？

编辑（2014 年 8 月 20 日）： 我最终为非模态对话框编写了 javascript 代码，一切都按要求运行良好。

编辑（2015 年 4 月 28 日）： 因为，我不能在这里发布我自己问题的答案。此页面应被视为调查结果。

【问题讨论】：

你有一个可行的例子吗？

标签： javascript angularjs dialog angular-ui non-modal

【解决方案1】：

使用 Bootbox 并将其设置为禁用其模式样式：

.bootbox {
    overflow:visible;
    height:1px;
    position:absolute; /* if necessary */
}

另外，您必须调用此 JavaScript 代码：

$(document).off('focusin.bs.modal'); // disable Bootstrap's anti-focus stuff
$('body').removeClass("modal-open");

【讨论】：

请阅读标题，我正在寻找非模式对话框。还有许多其他库/示例比 Bootbox 好得多，但我需要一个非模态对话框。

【解决方案2】：

如果您使用对话框只是为了显示一些信息，而不是为了接受任何输入，

您可以使用 BootBox：http://bootboxjs.com/ angular-ui 模态对话框：http://angular-ui.github.io/bootstrap

另外，另一种方法是使用块 UI。您可以在 HTML 中设计对话框，并使用 Malsup Block UI 在阻止对话框中显示 HTMl。更多详情：http://malsup.com/jquery/block/#dialog

免责声明：它们都有一些或其他的依赖关系..

【讨论】：

Bootbox 没有非模态对话框。引导程序都没有。将检查块 UI，但我想与其他两个类似，它不会有任何开箱即用的东西。
谢谢 Manish，删除我猜你是说使用“静态”值作为背景——这仍然是一个模态对话框。
阅读问题。您提到了创建模态对话框的不同方法（我从未问过我追求的是非模型/无模式）。
您阅读了这些选项，但您没有通过 malsup BlockUI.. 通过一些 CSS 调整，您可以使用它创建一个非模态对话框。

【解决方案3】：

您可以使用 Bootstrap 并将其与 AngularJS 集成。它是最小的 JS，基于 CSS 和响应式设计的最佳实践。

【讨论】：

请先阅读问题。顺便说一句，我已经在使用 Bootstrap（它没有非模态对话框）