valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.53k stars 1.69k forks source link

Is the modal draggable? #2002

Closed chinra02 closed 7 years ago

chinra02 commented 7 years ago

Hi,

Could you please add draggable support to modal to move around.

Thanks

IlyaSurmay commented 7 years ago

Hi! This feature isn't a part of original bootstrap modal so we won't include this functionality to the package. Although you can use this lib https://www.npmjs.com/package/angular2-draggable (just apply ngDraggable directive on .modal-dialog and there you go)

chinra02 commented 7 years ago

Thanks for the update. I will try using angular2-draggable

zuzhal commented 7 years ago

Hi! Thanks for the package :) Anyhow, i have a little problem with the modal. Every time I drag it, move it, dissmis it and then opening it again, it opens and the position where it was moved. Is there anyway how the window can "pop up" at the center of the screen, even if I have moved it before? Thanks!

andrea-spotsoftware commented 6 years ago

@IlyaSurmay do you have an elegant way to do this? Because i'm using modal service, and I can't access the outer modal.

cmark11 commented 6 years ago

Is there a way to handle persistence that @zuzhal is referring to?

ctrl-brk commented 6 years ago

@cmark11 https://github.com/xieziyu/angular2-draggable/issues/30

mattxu-zz commented 5 years ago

I wrote a simple library mattxu-zz/ngb-modal-draggable to make ng-bootstrap modal draggable. maybe you could try it.

volkanokcu commented 5 years ago

@IlyaSurmay do you have an elegant way to do this? Because i'm using modal service, and I can't access the outer modal.

@IlyaSurmay @andrea-spotsoftware I have same problem. Using Angular2Dragable(ngDraggable directive). Any solution? Thanks.

pasadyaguy commented 5 years ago

I am using jquery ui to make modals draggable.

https://stackoverflow.com/a/53843281/6559330

markleusink commented 5 years ago

Simple directive (based on the ngx-modal-draggable library mentioned above) to make an ngx-bootstrap modal draggable: https://gist.github.com/markleusink/7af171d5f17e7dc9714e69965fdabab9

yasstec commented 4 years ago

a solution for that is to use :

import { AngularDraggableModule } from 'angular2-draggable'; in your app.module .

in your angular's styles.css put :

`.modal-content > .ng-draggable { background-color: #fff; }

.backgroundTransparent .modal-content { background: transparent !important; }

.modal-content { background: transparent !important; border: none; }`

in your html put a <div ngDraggable> inside your modal's ng-template :