無需使用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和響應設計的最佳實踐。