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

Question

I am trying to create non-modal dialogs in my AngularJS app.

The app uses Bootstrap as well.

I am trying to create a draggable dialog, which remains active while the rest of the background can be interacted with (non-modal definition).

So, far I have played with Bootstrap modal which doesn't fit in with the above requirement.

This library: https://github.com/jwstadler/angular-jquery-dialog-service

is exactly what I need, with one drawback this uses JQuery-UI (which I can't use, as it is too big)

Any pointers on how to achieve this with least dependencies ?

EDIT (20 August, 2014): I ended up writing javascript code for the non modal dialogs, all working good as required.

EDIT (28 April, 2015): Since, I can not post the answer here to my own question. This page should be seen just as findings.

Answer 1

You can use Bootstrap and integrate it with AngularJS. It is minimal JS, and based on best practices for CSS and responsive design.

Answer 2

If you're using the dialog box just for the purpose of showing some information, not for taking any input,

You can use BootBox : http://bootboxjs.com/ angular-ui modal dialog boxes : http://angular-ui.github.io/bootstrap

Also, an alternative approach could be using block UI. You can design your dialog in the HTML, and show that HTMl in an blocking dialog box using Malsup Block UI.. More Details : http://malsup.com/jquery/block/#dialog

Disclaimer : All of them have some or the other dependency..

Answer 3

Use Bootbox and set this to disable its modal style:

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

Also, you'll have to call this JavaScript code:

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