openModalAttachment(template: TemplateRef<any>, index: number) {
this.index = index;
this.getFile(index);
this.modalRef = this.modalService.show(template);
this.openModalAnexo = true;
this.fullScreen();
}
onClick(event) {
event.stopPropagation();
var modalAnexo = document.getElementById('imgAnexo');
console.log(this.openModalAnexo, modalAnexo);
if (this.openModalAnexo && !modalAnexo) {
console.log(event.target);
this.openModalAnexo = false;
modalAnexo = null;
this.closeFullScreen();
}
}
onCloseAttachment() {
this.message = 'Declined!';
this.index = -1;
this.modalRef?.hide();
this.closeFullScreen();
}
closeFullScreen() {
document.onclick = function (event) {
if (document.fullscreenElement) {
event.stopPropagation();
document
.exitFullscreen()
.then(() => console.log('Document Exited from Full screen mode'))
.catch((err) => console.error(err));
}
};
}
fullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
}
} <img src="/assets/icons/eysblue.svg" class="openAtchament" (click)="openModalAttachment(attachment, j)"
*ngIf="collapseData.label == 'ANEXOS'">
<ng-template #attachment >
<div class="" id="myModal">
<div class="modal-content">
<div class="modalOpenGaley">
<span class="close" (click)="onCloseAttachment().document.getElementById('lightbox')">×</span>
<embed [src]="file" #files id="imgAnexo" class="files-images-pdf"
type="application/pdf">
<img [src]="file" id="imgAnexo" class="files-images-pdf" />
<div id="caption"></div>
</div>
</div>
</div>
</ng-template>I've done a lot of research and I haven't found anything, I'm quite a layman, please help me. when opening my image it needs to be opened in fullscreen, when i click out of the image to close the image there is a bug of not going out in fullscreen mode.
clicking away is fullscren like this: enter image description here
the correct one would be: when clicking outside the image, close the fullscreen and look like this:
