Untitled

dabblet.css

.SideModal__modal {
	max-width: 375px;
	width: 100%;
    height: 100%;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10001;
    transform: translateX(100%);
    transition: transform 0.5s linear;
    animation-name: SideModal__slideOpen;
    animation-duration: 0.5s;
    outline: 1px solid red;
}
    
.SideModal__modal.SideModal__open {
	transform: translateX(0);
}

.ModalOverlay__container {
	position: absolute;
    height: 100%;
    width: 100%;
    z-index: 10002;
    background-color: #2d2d2d;
}

.PhotoGallery__container {
    height: 100%;
}

.PhotoGallery__imageContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 10004;
    }
    
.PhotoGallery__image {
    display: block;
    max-width: 100%;
    max-height: 100%;}

dabblet.html

<div class="SideModal__modal SideModal__open">
	<div>
		<h1>Modal</h1>
	</div>
	<div class="ModalOverlay__container" style="top: 0px;">
		<div class="PhotoGallery__container" id="overlay6934">
			<div class="PhotoGallery__imageContainer">
				<img class="PhotoGallery__image" src="https://picsum.photos/id/237/640/640">
			</div>
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}