Anchor modal to component - Mendix Forum

Anchor modal to component

0

Currently, a modal is always opened in the middle of the screen.


In several use cases, we would like to open a modal by clicking a button - and the modal should be placed beside or below the clicked button.

So a improvement would be to anchor the model to a specific component of the page. I could imagine that the developer can select the component to which the modal shall be anchored, plus the orientaion (left, right, above, below). Other option would be to use a class name as component reference.

asked
1 answers

Yes, this can be achieved without changing the modal behavior globally.


One approach is to override the positioning using a custom class, for example:


.modal-style {
    left: 75px !important;
    top: 170px !important;
}


However, this works only for fixed positioning and is not dynamic relative to the triggering element.

For a more flexible solution, we can anchor the modal relative to the button by wrapping the button in a parent container and placing the modal inside it. By setting the parent container to position: relative and the modal to position: absolute, the modal can be positioned based on the button.


Example:

.button-con {
    position: relative;
}

.modal-con {
    position: absolute;
    top: calc(100% + 16px); /* places below the button */
    left: 0;
    z-index: 99;

    width: 300px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #d7d7d7;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}


This way, the modal behaves more like a popover and can be easily adjusted (top, bottom, left, right) relative to the button.


If needed, we can further enhance this by dynamically controlling the orientation.


don't forget to add the class

Created