Modal - Web Component

Developer
Cliff Pyles
Size
2,586 Kb
Views
6,072
  1. Modal - Web Component Previews
  2. Modal - Web Component HTML Codes
  3. Modal - Web Component CSS Codes

How do I make an modal - web component?

A modal I made using web component technologies.. What is a modal - web component? How do you make a modal - web component? This script and codes were developed by Cliff Pyles on 15 January 2023, Sunday.

Modal - Web Component Previews
IQ Test

Modal - Web Component - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Modal - Web Component</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <x-modal open> <p>This is a sample modal. It is made using web component technologies. Once you click on the black background, the modal will close.</p> <p>The valid attributes are "open" and "disabled".</p>
</x-modal>
<script>
class XModal extends HTMLElement { constructor() { super(); this.el = this.attachShadow({mode: 'closed'}); if (this.hasAttribute('open')) { this._renderContainer(); } } static get observedAttributes() { return ['disabled', 'open']; } get disabled() { return this.hasAttribute('disabled'); } set disabled(val) { if (val) { this.setAttribute('disabled', ''); } else { this.removeAttribute('disabled'); } } get open() { return this.hasAttribute('open'); } set open(val) { if (val) { this.setAttribute('open', ''); } else { this.removeAttribute('open'); } } connectedCallback() { const overlay = this.el.querySelector('#overlay'); const main = this.el.querySelector('#main'); this._boundOnOverlayClick = this._onOverlayClick.bind(this); overlay.addEventListener('click', this._boundOnOverlayClick); } attributeChangedCallback(name, oldValue, newValue) { if (this.open) { this._renderContainer(); } else { this.el.innerHTML = ''; } } _onOverlayClick() { if (this.disabled) { return; } this.setAttribute('open', !this.getAttribute('open')); this.el.innerHTML = ''; } _renderContainer() { let container = ` <style> * { box-sizing: border-box; } :host, .overlay { position: fixed; display: flex; align-items: center; justify-content: center; top: 0px; left: 0px; width: 100vw; height: 100vh; padding: 1rem; contain: content; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.85); } .main { z-index: 1; background: #fff; width: 450px; height: 350px; max-width: 100%; max-height: 100%; padding: 1rem; } </style> <div id="overlay" class="overlay"></div> <div id="main" class="main"> <slot></slot> </div> `; this.el.innerHTML = container; }
}
if (window.customElements) { customElements.define('x-modal', XModal);
} else { document.querySelector('x-modal').innerHTML = `<p class="not-supported">Web components use	experimental technologies. The browser you are using is not currently supported.</p>`;
}
</script>
</body>
</html>

Modal - Web Component - Script Codes CSS Codes

p { margin: 1rem 0px; margin-top: 0px;
}
p + p { margin-top: 1rem;
}
.not-supported { padding: 1rem;
}
Modal - Web Component - Script Codes
Modal - Web Component - Script Codes
Home Page Home
Developer Cliff Pyles
Username cliffpyles
Uploaded January 15, 2023
Rating 3
Size 2,586 Kb
Views 6,072
Do you need developer help for Modal - Web Component?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Cliff Pyles (cliffpyles) Script Codes
Name
Animated Lamp Highlighting a Header
Ember Component Starter
Hexadecimal Color Previewer
Three Column Flexbox Layout
CSS Grid Overlay
Circular Progress Bar
Fading Slideshow
Content Preview
Terminal Interface
SVG Starter
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!