Implementing a fullscreen modal dialog

Background

We are creating a WordPress plugin that allow users to embedded ZenUML diagrams in WordPress posts and pages. To give users the best editing experience, we would like to allow the user to create diagram in a fullscreen dialog instead of a small editing area embedded in the post editor.

Challenge

A ZenUML editor embedded in the post editor

The block editor is rendered within a div whose max-width is set as 100% of the parent div. The parent can be selected with .block-editor-block-list__layout. In a normal DOM flow you would not be able create a div bigger than the parent.

Solution

Create a wrapper with a fixed position (position:fixed; top:0; right:0;). When an element has fixed position, it is removed from the normal flow of the page and the coordinate system is relative to the entire browser window (viewport). The key difference is that fixed elements don’t scroll with the rest of the page.

Once we have a wrapper properly positioned, we will then need to do the following:

z-index: 10000;     // put it on top of other elements 
width: 100vw;       // to cover the whole viewport
height: 100vh;
background: white;  // to hide the elements under it
opacity: 0.95;

After that, you can render any element within the wrapper now.