Apex Code Development You need to sign in to do that
Don't have an account?
How to display popup related to a div to a relative position?
I have 3 divs (each div have a popup window to display once the div is clicked). I am writing this code for visualforce page.
Right now, popup window is displaying related to the div selected, But not in particular location.
The expected popup modal should be near the selected div like below
The CSS code so far
[1]: https://i.stack.imgur.com/UtClO.png
[2]: https://i.stack.imgur.com/EWmeU.png
Right now, popup window is displaying related to the div selected, But not in particular location.
The expected popup modal should be near the selected div like below
The CSS code so far
.ui-selectee{
position: relative;
display: inline-block;
border-right-style: solid;
border-bottom-style: solid;
border-top-style: solid;
border-width: 0.1rem;
border-color: #B2BABB;
width: 4.1rem;
max-width: 4.1rem;
max-height: 2.3rem;
height: 2.3rem;
margin: 0;
overflow: hidden;
cursor: pointer;
/* white-space: nowrap; */
}
/* The actual popup window : reservation detail; */
#ReservationBookedBlock, #ReservationBookedBlock1{ /* visibility: hidden; */
background-color: white;
color: black;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
top: 125%;
left: 50%;
margin-left: -80px;
border: dotted; width:38rem; padding:1rem;
}
.ui-selectee .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;}
/* The arrow of the popup */
.ReservationBookedBlock_cssClass ::after{
content: "";
position: absolute;
bottom: 100%;
right: 50%;
margin-left: -25px;
margin-bottom: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;/* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}}@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}}
[1]: https://i.stack.imgur.com/UtClO.png
[2]: https://i.stack.imgur.com/EWmeU.png
Position: fixed will solve your problem. Your use of position: absolute might be causing the issue.
Please try this
background-color: white; color: black; border-radius: 6px; padding: 8px 0; position: fixed; z-index: 1; top: 125%; left: 50%; margin-left: -80px;There's more than a few ways to do what you're trying to do, but the Cadillac way to do it might be modal popups.For more information please check with below link.- https://www.script-tutorials.com/css3-modal-popups/
Please let us know if this helps.Regards,
Nagendra.