Modals pure css modal with animation, transparent background and window

To toggle modals use label for="" tag that points assign input type="radio" above modal tag.

For closing modal you need once more input tag that will tell when modal is close, use the same name for all input elements in the same group of modals. This solution gives you the opportunity to switch between modals in one group, the same as work gropus of radio inputs with the same name.

normal #



transparent #


group #


on checkbox input #


Setup #

classes less/formir/setup/classes.less #

				@modal: modal;
@modal-wrapper: modal-wrapper;
@modal-window: modal-window;
@modal-footer: modal-footer;
@modal-header: modal-header;
@modal-content: modal-content;
@modal-close: modal-close;
@modal-backdrop: modal-backdrop;
@modal-animated: animated;
@modal-open: modal-open;
@modal-opened: modal-opened;
@modal-centered: centered;

@modal-window-s: modal-widnow-s;
@modal-window-l: modal-window-l;
@modal-window-xl: modal-window-xl;
@modal-window-fullscreen: modal-window-fullscreen;

variables less/formir/setup/variables.less #

				@modal-width: 650px;
@modal-margin: 5vh;
@modal-min-height: 300px;
@modal-max-width: calc(100% ~"-" @content-min-margin * 2);
@modal-background-color: rgba(0, 0, 0, 0.7);
@modal-border: 0 none;
@modal-header-background: transparent;
@modal-animate-function: 0.4s ease;
@modal-animate-transform-x: 0;
@modal-animate-transform-y: -100vh; // x, y

@modal-s-width: 450px;
@modal-l-width: 70%;
@modal-xl-width: 80%;
@modal-fullscreen-width: 100%;