Question

如果登录成功，我想自动关闭弹出窗口。我写的代码如下所示。但这是行不通的。谁能帮忙。

我的html

    <div class="modal fade" id="myModal">
<button type="button" class="close" data-dismiss="modal">&times;</button>
      <div class="modal-dialog">
        <div class="modal-content" >
        <input id="login-username" type="text" class="form-control" name="username">
        <input id="login-username" type="text" class="form-control" name="password">
        <input type="button" id="btn-login" class="btn btn-success" (click)="funlogin()">Login  </button>
        </div>
    </div>
    </div>

我的ts

import * as $ from 'jquery';
funlogin(){
///If(login==true){
$("#myModal").dialog("close")
}else{
alert(login failed)
}

Answer 1

为什么不使用指令来实现该行为？

在这里完全不需要jQuery。您可以使用角度组件来管理模态，并在需要时显示它，或者在不需要时隐藏它。此外，从父组件/视图管理此行为，可以避免DOM中不必要的元素

public isLoggedIn = false;


funlogin(){
  this.isLoggedIn = true
}

<modal *ngIf="!isLoggedIn">

</modal>

Answer 2

尝试使用类似的切换： $（“＃myModal”）。dialog（“ toggle”）

Answer 3

使用modal（'hide'）方法：

funlogin(){
    if(login==true){
       $("#myModal").modal('hide');
    }else{
      alert(login failed)
    }
}

Answer 4

您也可以不使用jquery来构建弹出窗口。您可以尝试角度引导。

@ ng-bootstrap / ng-bootstrap

npm install @ ng-bootstrap / ng-bootstrap --save

sample.module.ts

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
 declarations: [],
 imports: [NgbModule]
 })

 export class SampleModule { }

sample.component.ts

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

constructor(private modalService: NgbModal){}

loginAction() {
  if(login.status == 'success') {
     this.modalService.dismissAll();
  }
}

sample.component.html

<ng-template #loginModal let-modal >
  <span class="modalClose" (click)="modal.dismiss('Cross click')"></span>
  <div class="modal-body" style="text-align:center">
    It is login Modal
    <input id="login-username" type="text" class="form-control" name="username">
    <input id="login-password" type="password" class="form-control" name="password">
    <button (click)="loginAction()">Login</button>
  </div>
</ng-template>

登录成功后如何隐藏弹出窗口

4 个答案: