I've played with this in the past - the Slide In widget is a nice solution. In the discussion above I see some CSS solutions as well, and I built one of those out asa well. Here's what I did:
Add the class "sidebar-popup" to your pop-up page, and add this CSS to your project:
.sidebar-popup {
position: fixed;
top:0 !important;
}
.sidebar-popup {
left:100% !important;
height:100% !important;
transition: transform .2s ease-in-out !important;
transform: translateX(100%);
}
.sidebar-popup.mx-window-active {
right: 0px !important;
left: auto !important;
transform: translateX(0);
}
.sidebar-popup.mx-window-active:not([data-focus-capturing="modal"]) {
left: 100% !important;
transform: translateX(100%);
}
.sidebar-popup .modal-content {
}
.sidebar-popup .mx-window-header .close {
display: none;
}
.sidebar-popup .mx-resizer {
display: none;
}
We implemented this by creating a new popup layout. We had set the width and height of the pop-up to 100vw and 100vh in a new CSS class that is added to the modal. After that you can add a layout grid to that modal which includes the context on the right hand side.
Hi Kamal,
As was already suggested, the slide widget can do this in a cool way.
I you really want a popup you do not need to create a custom widget, using sass/css you can have a popup look like and be place whatever way you want.
EDIT: beaten with 20 seconds! anyway, what Freek said