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

Question

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

该应用程序也使用Bootstrap。

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

因此，到目前为止，我玩过的Bootstrap模式不符合上述要求。

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

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

关于如何以最少的依赖关系实现此目标的任何指示？

编辑（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阻止用户界面在阻止对话框中显示HTM1。更多详细信息： http ://malsup.com/jquery/block/#dialog

免责声明：它们都具有某些或其他依赖性。

Answer 3

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