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

Question

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

该应用程序也使用Bootstrap。

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

所以，到目前为止，我已经使用了Bootstrap模式，它不符合上述要求。

这个图书馆： https://github.com/jwstadler/angular-jquery-dialog-service

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

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

EDIT（2014年8月20日）： 我最终编写了非模态对话框的javascript代码，所有工作都很好。

编辑（2015年4月28日）： 既然如此，我不能在这里回答我自己的问题。这个页面应该被看作是发现。

Answer 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");

Answer 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

免责声明：所有这些都有一些或其他依赖...

Answer 3

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