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

Non-Modal/Modeless Dialogs in AngularJS without using jquery-ui

本文关键字：模态 对话框 AngularJS jquery-ui      更新时间：2023-09-26

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

应用程序也使用Bootstrap。

我正在尝试创建一个可拖动的对话框，它保持活动，而背景的其余部分可以交互(非模态定义)。

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

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

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

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

编辑(2014年8月20日):我最终为非模态对话框编写了javascript代码，所有的工作都很好。

编辑(2015年4月28日):因为，我不能在这里张贴我自己的问题的答案。这个页面应该被看作是发现

使用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: http://bootboxjs.com/Angular-ui模式对话框:http://angular-ui.github.io/bootstrap

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

免责声明:它们都有一些或其他依赖关系。

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

相关文章：