angular2 bootstrap modal

----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);

　　

　

转载于:https://www.cnblogs.com/Zoes/p/7479619.html