After successfully implementing click and hover functionality on an element, I was able to position the popup relative to the mouse pointer based on a previous solution. However, I am now facing an issue where I want the popup modal to be fixed in a specific position when hovered over the middle of the element vertically.
The problem arises when I hover over the element causing the popup modal to flicker, and only opens up when I click somewhere else within the element.
Onclick
I aim to display the popup modal in full screen when clicked (this works but with flickering issues) + keep it open while being hovered. The modal should close only when clicked outside of it.
OnHover
My goal is to have the popup modal fixed at the vertical center by the side of the hovered element(this works too but the positioning is off) + remain opened while being hovered. As soon as the mouse leaves the element or the modal, it should automatically close.
Minimum Reproducible Example
app.component.html
<div class="box"
(mouseenter)="addClickEvent($event)"
(mouseleave)="addClickEvent($event)"
(mousemove)="addClickEvent($event)"
(click)="addClickEvent($event)">
</div>
<fs-modal *ngIf="modalShow"
[ngStyle]="{'top.px': (zoneIsClicked ? 0 : modaltop) ,
'left.px':(zoneIsClicked ? 0 : modalleft)}"
[ngClass]="zoneIsClicked ? 'zoneClicked' : 'zoneNotClicked'">
</fs-modal>
app.component
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
name = 'Angular';
modalShow = false;
modalleft;
modaltop;
zoneIsClicked;
addClickEvent(e) {
if(e.type === 'click'){
this.modalShow = true;
this.zoneIsClicked = true;
}
/*else if (e.type === 'mousemove') {
this.modalleft = e.clientX
this.modaltop = e.clientY
}*/
else if (e.type === 'mouseenter') {
this.modalShow = true;
this.zoneIsClicked = false;
this.modalleft = e.clientX
this.modaltop = e.clientY
}
else if (e.type === 'mouseleave') {
this.modalShow = false;
}
}
}
app.component.css
.box{
width: 100px;
height: 100px;
background: rgba(254, 249, 247, 1);
border: 1.5px solid #e24301;
margin: 50px;
font-size: 0.8rem;
position: absolute;
}
.zoneClicked{
display: block;
position: absolute;
width: 900px;
}
.zoneNotClicked{
position: absolute;
width: 50%;
}
fsmodal.component
import { Component, Input } from '@angular/core';
@Component({
selector: 'fs-modal',
template: `<div [ngStyle]="{'border':'1px solid black'}">ok</div>`,
styles: [`h1 { font-family: Lato; }`]
})
export class fsModalComponent {
}