----html-------
<div #ele
class="modal fade " style="z-index: 9999"
data-backdrop="false"
data-show="true" >
<div class="modal-dialog">
<div class="modal-content">
<div class=" modal-header ">
<button type="button" class="close" (click)="onClose()" aria-label="Close"><span aria-hidden="true"><i
class="fa fa-times"></i></span></button>
<h4 class="modal-title"><span [innerText]="header"></span></h4>
</div>
<div class="modal-body slimScrollDiv"> <ng-content></ng-content>
</div>
</div>
</div>
</div>
-------ts--------------
import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
@Component({
selector: 'eve-modal',
templateUrl: 'eve-modal.component.html'
})
export class ModalComponent implements OnInit {
private _shown=false;
private _allowDrag=false;
@ViewChild("ele")
private ele:ElementRef;
@Input()
set allowDrag(val){
if(val===this._allowDrag){
return;
}
if(val){
$(this.ele.nativeElement).drags({handle: ".modal-header"});
}
}
@Input()
header:string;
@Input()
get shown(){
return this._shown;
}
set shown(val){
if(this._shown===val){
return
}
this._shown=val;
this.showModal(val);
this.shownChange.emit(val);
}
@Output()
shownChange:EventEmitter<boolean> =new EventEmitter();
constructor(private eleRef:ElementRef) {
this.eleRef.nativeElement.style["z-index"]=9999;
}
ngOnInit() {
}
onClose(){
this.shown=false;
}
showModal(val:boolean){
if(val){
$(this.ele.nativeElement).find(".modal-content").attr("style","")
}
$(this.ele.nativeElement).modal(val?"show":"hide");
}
}
-------jquery drag extends-----------------
(function ($) {
$.fn.drags = function (opt) {
opt = $.extend({
handle: "",
cursor: "move"
}, opt);
var $selected = this.find(".modal-content");
var $elements = (opt.handle === "") ? this : this.find(opt.handle);
$elements.css('cursor', opt.cursor).on("mousedown", function (e) {
var pos_y = $selected.offset().top - e.pageY,
pos_x = $selected.offset().left - e.pageX;
$(document).on("mousemove", function (e) {
$selected.offset({
top: e.pageY + pos_y,
left: e.pageX + pos_x
});
}).on("mouseup", function () {
$(this).off("mousemove"); // Unbind events from document
});
e.preventDefault(); // disable selection
});
return this;
};
})(jQuery);