1

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.

AliR
  • 2,065
  • 1
  • 27
  • 37

3 Answers3

0

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");
redolent
  • 4,159
  • 5
  • 37
  • 47
  • 1
    please read the title, I was looking for non-modeless dialog. There are many other libraries/examples much better than Bootbox, but I needed a non-modal dialog. – AliR Apr 15 '15 at 23:42
-1

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..

Manish Kr. Shukla
  • 4,447
  • 1
  • 20
  • 35
  • 1
    Bootbox doesn't have a non-modal dialog. Neither Bootstrap. Will check out block UI, but I guess similar to the other two it won't have anything out of the box. – AliR Aug 04 '14 at 06:29
  • Thanks Manish, by removing I guess you are saying use the 'static' value for backdrop -- This still remains a modal dialog. – AliR Aug 04 '14 at 23:40
  • Read the question. You have mentioned different ways to create modal dialogs (I never asked that I am after non-model/modeless). – AliR Aug 05 '14 at 03:47
  • You read those options, but you didn't Went thru malsup BlockUI.. By just a few CSS tweaks, you can create a non-modal dialog box using it. – Manish Kr. Shukla Aug 05 '14 at 04:07
-4

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

Smi
  • 13,850
  • 9
  • 56
  • 64
user3890194
  • 65
  • 6
  • Please read the question first. BTW I am already using Bootstrap (it has no non-modal dialog) – AliR Aug 05 '14 at 00:01