web-dev-qa-db-ja.com

Angular 2でモーダルを閉じるにはどうすればよいですか？

ユーザーが[送信]ボタンをクリックすると、モーダルが自動的に閉じます。

Submit _data-dismiss="modal"_に_<button>_を追加すると、submitComments()は実行されません。

$('#myModal').modal('hide');のようなことをしようとしましたが、成功しませんでした。

だからどうすればAngular 2？でモーダルを閉じることができますか？ありがとう

_<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
     <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form (ngSubmit)="submitComments()">
                    <div class="form-group row">
                        <label class="form-control-label col-sm-2">Comments:</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
_

。

_submitComments() {
    // I want to do something like $('#myModal').modal('hide'); here.
}
_
angularbootstrap-modal
18
Hongbo Miao

@MattScarpinoの答えとは別に、ボタンの種類をbuttonからsubmitに変更し、関数submitComments()を呼び出して同時にdismiss-modal。そうすることで、モーダルを解除し、同時に関数を呼び出すこともできます。ここに例があります：

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
     <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form>
                    <div class="form-group row">
                        <label class="form-control-label col-sm-2">Comments:</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" (click)='submitComments()' data-dismiss="myModal" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

更新

コントローラー側からモーダルを閉じたい場合は、この方法を使用できます

$("#myModal").modal("hide");
16
Pardeep Jain

これを行うには、Angular2コントローラー内の任意の型でjQuery変数を宣言するだけです。

declare var jQuery:any;

これをimportステートメントの直後、コンポーネントデコレータの前に追加します。

次に、bootstrap=このIDのモーダルにアクセスします。

jQuery("#myModal").modal("hide");
28
Devesh Jadon

_@ViewChild_を使用する

_#closeBtn_を使用して要素に_data-dismiss="modal"_を追加します

_<a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a>
_

コンポーネントhtml

_<div class="modal fade" id="yourModalId">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>
_

this.closeBtn.nativeElement.click();を使用してクリックイベントをトリガーすると、モーダルが閉じます。

コンポーネントTypeScript

_import {ViewChild, ElementRef} from '@angular/core';
@Component({
    moduleId: ...,
    selector: '.',
    templateUrl: '.',
    styleUrls: ['.']
})
export class yourClass {
    @ViewChild('closeBtn') closeBtn: ElementRef;

    yourFunction() {
        //do something
        ...
        ...
        //close your modal
        this.closeModal();
    }

    //call this wherever you want to close modal
    private closeModal(): void {
        this.closeBtn.nativeElement.click();
    }
}
_
26
Thang Le

最初に、divのhiddenプロパティを変数に設定します：

_<div id="myModal" [hidden]="hideModal" class="modal fade">
_

次に、クラスでhideModalという名前のブール値を定義し、falseに設定します。

_hideModal: boolean = false;
_

3番目に、submitComments()で、hideModalをtrueに設定します。

4
MatthewScarpino

この宇宙における完璧な答え.........................

ステップ1：モーダルの[閉じる]ボタンに一意のIDを与える

ステップ2：フォームの送信またはタスクの呼び出しが正常に完了した後

document.getElementById("addProductCloseButton").click();

あなたのクラスで

3
Pravash Raj Upreti

私は答えの1つを使用し、いくつかの編集で私のために完璧に作業します

<button hidden="hidden" class="fa fa-close" data-dismiss="modal" id="closeBtn" #closeBtn (click)="yourModal.close()"></button>

コンポーネントhtml

<div style="margin-top: 0px !important;">
    <button type="button" id="openModal" #openModal class="btn btn-fab-mini btn-outline-primary" style="float:right" (click)="yourModal.open()"><strong>click here to open modal</strong></button>
    <modal #yourModal>
      <ng-template #modalHeader>
       <button hidden="hidden" class="fa fa-close" data-dismiss="modal" id="closeBtn" #closeBtn (click)="yourModal.close()"></button>
      </ng-template>
      <ng-template #modalBody>
        <yourmodalSelectorname></yourmodalSelectorname>
      </ng-template>
      <ng-template #modalFooter></ng-template>
    </modal>
  </div>

TypeScript

import {ViewChild, ElementRef} from '@angular/core';

@Component({
moduleId: ...,
selector: '.',
templateUrl: '.',
styleUrls: ['.']})



yourFunction() {
    //do something
    ...
    ...
    //close your modal
    this.closeModal();
}

//call this wherever you want to close modal
private closeModal(): void {
    this.closeBtn.nativeElement.click();
}
2
Mehrdad

モーダルボディにフォームを含めないでください。代わりに、フッターセクションに同じボタンを2つ追加してください。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body">
    <label class="form-control-label col-sm-2">Comments:</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" rows="3"></textarea>
                    </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
            <button type="submit" class="btn btn-primary" >Save changes</button>
          </div>
        </div>
      </div>
    </div>
2
Marilynn

私はこのようにそれをしました、そして、それは完全に私のために働きます。

var element = document.getElementById("CloseButton") as any;

element.click();

ここで、私のCloseButtonはbootstrap閉じるボタン。

2
Kindlebit Net