modal

PHOTO

Fri Feb 11 2022 05:00:46 GMT+0000 (Coordinated Universal Time)

Saved by @artistole #htm

<button class="modal-initialise">Modal</button>
<div id="overlay"><div>
<div class="modal">
    <div class="modal-header">
        Example modal
        <button class="modal-close">
            <img src="close-white24.svg" />
        </button>
    </div>
    <div class="modal-content">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit vero
        blanditiis delectus repellendus ducimus, adipisci totam temporibus
        nihil commodi quod expedita, sit, fugiat quibusdam voluptas.
    </div>
    <div class="action-btn">
        <button class="scl-btn scl-btn-primary">Action 1</button>
        <button class="scl-btn scl-btn-secondary">Action 2</button>
    </div>
</div>

javascript code:

const modalInitialise = document.querySelector(".modal-initialise");
const modalClose = document.querySelector(".modal-close");
const modal = document.querySelector(".modal");

modalInitialise.addEventListener("click", () => {
	document.querySelector(".modal").style.display = "block";
	document.querySelector("#overlay").style.display = "block";
	document.querySelector("#overlay").style.backgroundColor =
		"rgba(0, 0, 0, 0.5)";
});

modalClose.addEventListener("click", () => {
	document.querySelector(".modal").style.display = "none";
	document.querySelector("#overlay").style.display = "none";
});

document.addEventListener("mouseup", function (e) {
	var container = document.querySelector(".modal");
	if (!container.contains(e.target)) {
		container.style.display = "none";
		document.querySelector("#overlay").style.display = "none";
	}
});

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

Speed CL

@artistole

Text-utilities-small text Text-utilities-grey text Text Utilities-heading Text-utilities-alignment Text-utilities-additional-styles lists-spaced lists-stacked navigation-simple navigation-submenu navigation-hamburger modal rating toast slider-simple sldier-vertical sldier-vertical grid-2x2 grid-3x3 avatar-pictures avatar-text simple-alert alert-close-btn badge-avatars badge-icons contained-btn outlined-btn text-btn icons-btn Floating-action-btn cards with badges Card with dismiss Card with text overlay Card with only text Horizontal Card Card with shadow Responsive images Round image Input field Input w/ validation get started css sfsaf Rounded buttons Responsive Navbar

get started css

<link rel="stylesheet" href="https://speed-cl.netlify.app/components.css" />

#pattern #regex #htm #password

Password pattern for HTML form with regex

<label
					aria-label="password"
					class="form-label"
					for="password"
				>Password</label>
				<p><small>6 - 12 characters, one number, one symbol, one uppercase and
						one lowercase letter.</small></p>
				<input
					class="form-control"
					title="Must be 6 - 12 characters and contain at least one number, one symbol, one uppercase and one lowercase letter."
					type="password"
					id="password"
					name="password"
					required
					pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{6,12}$"
				/>

Text Utilities-heading

<div class="heading-1">Heading-1</div>
<div class="heading-2">Heading-2</div>
<div class="heading-3">Heading-3</div>

Text-utilities-small text

<div class="small-text">Example of small text</div>

Text-utilities-grey text

<div class="grey-text">This is an example of grey text</div>

Text-utilities-alignment

<div class="left-text">Left</div>
<div class="center-text">Center</div>
<div class="right-text">Right</div>

Text-utilities-additional-styles

<div class="warning-text">Example of warning text</div>
<div class="error-text">Example of error text</div>
<div class="wgt-900">font weight 900</div>
<div class="wgt-500">font weight 500</div>
<div class="wgt-200">font weight 200</div>

<ul class="scl-list-default">
	<li class="scl-list-item">List Item</li>
</ul>

<ul class="scl-list-numbers">
	<li class="scl-list-item">List Item</li>
</ul>

<ul class="scl-list-roman">
	<li class="scl-list-item">List Item</li>
</ul>

<ul class="scl-list-alphabet">
	<li class="scl-list-item">List Item</li>
</ul>

<ul class="scl-list-none">
	<li class="scl-list-item">List Item</li>
</ul>

<ul>
    <li class="scl-primary scl-stacked-item">
        This is a primary notification<img src="#" />
    </li>
    <li class="scl-success scl-stacked-item">
        This is a success notification
        <img src="#" />
    </li>
    <li class="scl-warning scl-stacked-item">
        This is a warning notification
        <img src="#" />
    </li>
    <li class="scl-error scl-stacked-item">
        This is an error notification
        <img src="#" />
    </li>
</ul>

navigation-simple

<nav class="header-component">
    <div class="branding">
        <div class="header-component-logo">Logo</div>
        <div>Name</div>
    </div>
    <div class="header-component-more">
        <div class="more">Home</div>
        <div class="more">About</div>
        <div class="more">More</div>
    </div>
</nav>

navigation-submenu

<nav class="header-component">
    <div class="branding">
        <div class="header-component-logo">Logo</div>
        <div>Name</div>
    </div>
    <div class="header-component-more">
        <div class="subnav">
            <button class="link">
                Home <i class="fa fa-caret-down"></i>
            </button>
            <div class="subnav-content">
                <div>Link1</div>
                <div>Link2</div>
                <div>Link2</div>
            </div>
        </div>
        <div class="subnav">
            <button class="link">
                About <i class="fa fa-caret-down"></i>
            </button>
            <div class="subnav-content">
                <div>Link1</div>
                <div>Link2</div>
                <div>Link2</div>
            </div>
        </div>
        <div class="subnav">
            <button class="link">
                More <i class="fa fa-caret-down"></i>
            </button>
            <div class="subnav-content">
                <div>Link1</div>
                <div>Link2</div>
                <div>Link2</div>
            </div>
        </div>
    </div>
</nav>

navigation-hamburger

<div class="subnav">
    <button class="link">
        <i class="fas fa-bars"></i>
    </button>
    <div class="subnav-content-hamburger">
        <div>Link1</div>
        <div>Link2</div>
        <div>Link2</div>
    </div>
</div>

<button class="modal-initialise">Modal</button>
<div id="overlay"><div>
<div class="modal">
    <div class="modal-header">
        Example modal
        <button class="modal-close">
            <img src="close-white24.svg" />
        </button>
    </div>
    <div class="modal-content">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit vero
        blanditiis delectus repellendus ducimus, adipisci totam temporibus
        nihil commodi quod expedita, sit, fugiat quibusdam voluptas.
    </div>
    <div class="action-btn">
        <button class="scl-btn scl-btn-primary">Action 1</button>
        <button class="scl-btn scl-btn-secondary">Action 2</button>
    </div>
</div>

javascript code:

const modalInitialise = document.querySelector(".modal-initialise");
const modalClose = document.querySelector(".modal-close");
const modal = document.querySelector(".modal");

modalInitialise.addEventListener("click", () => {
	document.querySelector(".modal").style.display = "block";
	document.querySelector("#overlay").style.display = "block";
	document.querySelector("#overlay").style.backgroundColor =
		"rgba(0, 0, 0, 0.5)";
});

modalClose.addEventListener("click", () => {
	document.querySelector(".modal").style.display = "none";
	document.querySelector("#overlay").style.display = "none";
});

document.addEventListener("mouseup", function (e) {
	var container = document.querySelector(".modal");
	if (!container.contains(e.target)) {
		container.style.display = "none";
		document.querySelector("#overlay").style.display = "none";
	}
});

Анимированный пузырь

<div style={{position: 'absolute', width: '300px', height: '300px'}}>
        <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="100%">
          <path fill="url(#gradient)">
            <animate
              attributeName='d'
              dur='10000ms'
              repeatCount='indefinite'
              values='
                M393,341.5Q310,433,201,399Q92,365,70,234Q48,103,176,93Q304,83,390,166.5Q476,250,393,341.5Z;
                M382.5,342Q310,434,205.5,396Q101,358,98.5,248Q96,138,207.5,87.5Q319,37,387,143.5Q455,250,382.5,342Z;
                M399.5,340.5Q309,431,207.5,393Q106,355,101.5,247Q97,139,201.5,108.5Q306,78,398,164Q490,250,399.5,340.5Z;
                M383.5,362Q323,474,210.5,417Q98,360,78,235Q58,110,185.5,83Q313,56,378.5,153Q444,250,383.5,362Z;
                M393,341.5Q310,433,201,399Q92,365,70,234Q48,103,176,93Q304,83,390,166.5Q476,250,393,341.5Z;
              '
            >
            </animate>
          </path>
          <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" style={{stopColor: 'rgb(255, 95, 109)'}}/>
              <stop offset="100%" style={{stopColor: 'rgb(255, 195, 113)'}}/>
            </linearGradient>
          </defs>
        </svg>
      </div>

<div class="star-container">
    <div class="star-active">
        <img src="#" />
    </div>
    <div class="star-active">
        <img src="#" />
    </div>
    <div class="star-active">
        <img src="#" />
    </div>
    <div class="star-active">
        <img src="#" />
    </div>
    <div class="star">
        <img src="#" />
    </div>
</div>

Browse more snippets >>