我正在使用Angular来开发客户端 - 服务器应用程序,但这不是一个Angular问题,或者可能是。
在一个页面上,我有一个按钮,可以打开一个带有2个按钮的模态。一个用于提交,另一个用于结束。如果实际点击它们,它们都可以工作。
问题在于我希望“提交”按钮关闭模式,即执行关闭按钮的操作。
我打开这样的模态:
@ViewChild(AddAfmStatementIdentifiersComponent) createAfmStatementIdentifiers: any = {};
CreateAfmStatementIdentifiers() {
this.createAfmStatementIdentifiers.afmStatementIdentifiers = this.afmStatementIdentifiers;
this.createAfmStatementIdentifiers.open();
}
2个按钮是:
<div id="responsive-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Modifica avizul</h4>
</div>
<div class="modal-body">
<div class="col-12">
<form novalidate class="form-horizontal p-t-20">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="form-group has-success">
<h4 class="entity-info"><label for="denumire" class="label-has-danger"> Serie </label></h4>
<div class="input-group">
<div class="input-group-addon"><img src="/images/Deseuri/serieDocument.svg" alt="document series" class="img-responsive" /></div>
<input type="text" id="serie" name="serie" class="form-control" [(ngModel)]="afmStatementIdentifiers.barcodeIdentifier" data-validation-required-message="campul nu poate fi gol!">
</div>
</div>
<div class="alert alert-danger" role="alert" *ngIf="barcodeIdentifierErrors.length > 0">
<ul>
<li *ngFor="let error of barcodeIdentifierErrors">
{{ error }}
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="form-group has-success">
<h4 class="entity-info"><label for="denumire" class="label-has-danger"> Numar inceput </label></h4>
<div class="input-group">
<div class="input-group-addon"><img src="/images/Deseuri/numarDocument.svg" alt="document start number" class="img-responsive" /></div>
<input type="text" id="startNumber" name="startNumber" class="form-control" [(ngModel)]="afmStatementIdentifiers.version" data-validation-required-message="campul nu poate fi gol!">
</div>
</div>
<div class="alert alert-danger" role="alert" *ngIf="versionErrors.length > 0">
<ul>
<li *ngFor="let error of versionErrors">
{{ error }}
</li>
</ul>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-md btn-red animated flipInX flipInY lightSpeedIn slideInUp" data-dismiss="modal" id="closeButton">
<i class="fa fa-window-close"></i> Close
</button>
<button type="button" class="btn btn-md btn-add animated flipInX flipInY lightSpeedIn slideInUp" (click)="submit()">
<i class="fa fa-floppy-o"></i> Save
</button>
</div>
</div>
</div>
</div>
在父母的我在孩子中调用这个方法:
cancel() {
$('#closeButton').click()
this.isOpen = false;
}
一切正常,但这两个div:
<div class="modal-backdrop fade in"></div>
<div class="sweet-overlay" tabindex="-1" style="opacity: -0.04; display: none;"></div>
保留在html中,它们使所有界面都不可点击
用户需要刷新页面才能点击任何其他按钮。
但实际上点击&#34;关闭&#34;按钮删除那些div。
单击提交按钮时,如何正确处理模态?