Modal

Developer
Elena
Size
9,533 Kb
Views
8,096
  1. Modal Previews
  2. Modal HTML Codes
  3. Modal CSS Codes
  4. Modal JS Codes

How do I make an modal?

Modal Popup with easy jQuery. What is a modal? How do you make a modal? This script and codes were developed by Elena on 17 December 2022, Saturday.

Modal Previews
IQ Test

Modal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Modal</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * {	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;	box-sizing: border-box;	}	html, body, .modal-wrap {	width: 100%; height: 100%;	margin: 0; padding: 0;	overflow: hidden;	}	body {	font-family: 'Roboto', sans-serif;	color: #FFF;	font-size: 16px;	line-height: 1.4;	font-weight: normal;	}	h1, h2, h3 {	font-family: 'Roboto', sans-serif;	}	h1 {	font-size: 43px;	margin: 35px 0 45px;	font-weight: bold;	}	h3 {	color: #FFF;	font-size: 27px;	display: inline-block;	width: 100%;	padding: 17px 7px;	margin: 0;	}	img {	width: 100%;	max-width: 100%;	height: auto;	}	button {	border: none;	outline: none;	color: #FFF;	font-size: 20px;	font-weight: bold;	padding: 10px 25px;	text-align: left;	margin: 25px;	-webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.35); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.35); width: 120px; position: relative;	}	button:hover {	cursor: pointer;	}	.b {	fill: #FFF;	}	.after {	display: block;	width: 50px;	height: 42px;	position: absolute;	top: 0px;	right: 0px;	padding: 10px 10px;	border-left: 1px solid #FFFFFF;	}	.horizontal {	list-style: none;	padding: 0;	margin: 0;	text-align: center;	}	.horizontal li {	display: inline-block;	vertical-align: middle;	}	.modal-wrap {	/*background: url(https://unsplash.imgix.net/photo-1428677361686-f9d23be145c9?fit=crop&fm=jpg&h=700&q=75&w=1050) center no-repeat;	-webkit-background-size: cover; background-size: cover;
*/	text-align: center;	position: relative;	}	.blur {	-webkit-filter: blur(5px); filter: blur(5px); position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;	}	#o-1 { background: #28B9D4; }	#o-1:hover { background: #26B1CB; }	#o-2 { background: #2DBAA7; }	#o-2:hover { background: #2EB2A0;}	#o-3 { background: #F0793F; }	#o-3:hover { background: #E07642; }	.mask {	background: rgba(0,0,0,.75);	position: absolute;	top: 0; left: 0; right: 0; bottom: 0;	z-index: 3;	display: none;	}	.m-content {	max-width: 300px;	width: 100%;	position: absolute;	z-index: 5;	left: 50%;	margin-left: -150px;	overflow: hidden;	top: 50%;	margin-top: -150px;	border: 1px solid #ccc;	background: #FFF;	text-align: center;	-webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.35); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.35);	display: none;	}	.m-content img {	max-height: 200px;	height: 100%;	}	.close {	content: '';	display: block;	width: 20px;	height: 20px;	line-height: 20px;	color: #eaeaea;	font-size: 18px;	font-weight: lighter;	position: absolute;	right: 10px;	top: 10px;	}	.close:hover {	cursor: pointer;	color: #FFF;	}	/* ====== Модальное окно 1 ====== */	#m-1 .title {	background: #5AC6E2;	}	.s-icon li {	width: 25%;	padding: 10px 0;	}	.s-icon li+li {	border-left: 1px solid rgb(93, 93, 93);	}	.s-icon li a {	display: inline-block;	vertical-align: middle;	width: 50px;	height: 50px;	}	.s-icon li a:hover .path {	fill: #32B1D1;	}	.path {	fill: #747474;	}	/* ====== Модальное окно 2 ====== */	#m-2 {	margin-top: -200px;	/*margin-left: -175px;*/	/*max-width: 350px;*/	}	#m-2 .title {	background: #1FBBA6;	padding-bottom: 20px;	}	.meta {	color: #FFF;	margin: 0;	}	.img-wrap {	border-radius: 100%;	width: 170px;	height: 170px;	margin: 17px 0;	display: inline-block;	vertical-align: middle;	background: url(https://m1.behance.net/rendition/modules/50393393/disp/05d8e97450a4564f4ca3d53c7a1544e9.png) center no-repeat;	-webkit-background-size: cover;	background-size: cover;	-webkit-transition: all .35s ease-in-out; -o-transition: all .35s ease-in-out; transition: all .35s ease-in-out;	}	.img-wrap:hover {	-webkit-transform: rotate(360deg);	-ms-transform: rotate(360deg);	-o-transform: rotate(360deg);	transform: rotate(360deg);	}	#m-2 button {	display: inline-block;	vertical-align: middle;	margin: 0;	width: 100%;	height: 43px;	padding: 10px 5px;	border: none;	text-align: center;	outline: none;	border-radius: 0px;	}	#m-2 h3 {	margin-bottom: 10px;	padding: 7px;	}	.path-2 {	fill: #FFF;	}	.s-button {	margin-bottom: 17px;	}	.s-button li {	width: 40%;	margin: 0 10px;	}	.s-button .i {	width: 20px;	height: 20px;	}	button[type='submit'] {	background: rgb(33, 192, 98);	}	button[type='submit']:hover {	background: rgb(41, 161, 90);	}	button[type='reset'] {	background: rgb(207, 56, 83);	}	button[type='reset']:hover {	background: rgb(181, 67, 87);	}	/* ====== Модальное окно 3 ====== */	#m-3 {	border: none;	}	#m-3 .title {	background: #323A45;	padding: 0 40px 20px;	}	.star li a {	display: block;	width: 20px;	height: 20px;	}	.star-s {	fill: #F17834;	}	.star-l {	fill: #000;	}	#m-3 img {	margin-bottom: -7px;	max-height: 450px;	}	.bottom {	display: block;	width: 100%;	padding: 15px 5px;	margin: 0;	background: #323A45;	overflow: hidden;	}	#m-3 span {	display: inline-block;	vertical-align: middle;	float: left;	color: #FFF;	font-weight: bold;	padding: 5px 10px;	}	.more {	display: inline-block;	vertical-align: middle;	color: #FFF;	background: #F17834;	font-size: 17px;	padding: 5px 10px;	float: right;	margin-right: 20px;	text-decoration: none;	}	.more:hover {	background: #E47232;	}	@media screen and (min-width: 320px ) {	#m-3 {	max-width: 250px;	margin-left: -150px;	}	}	@media screen and (min-width: 480px ) {	#m-1 {	max-width: 400px;	margin-left: -200px;	}	#m-2 {	max-width: 350px;	margin-left: -175px;	}	}	@media screen and (min-width: 510px ) {	#m-1 {	max-width: 500px;	margin-left: -250px;	}	} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<html lang="en">
<head> <meta charset="UTF-8" /> <title>Document</title>
</head>
<body>	<img src="https://unsplash.imgix.net/photo-1428677361686-f9d23be145c9?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="" class="blur">	<div class="modal-wrap">	<h1>Модальное окно</h1>	<button class="open" id="o-1">1	<svg class="after" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path class="b" d="M187.765,417.257L232.431,462H50V279.572l44.744,44.666l97.597-97.597l93.02,93.02L187.765,417.257z M279.572,50l44.666,44.743l-96.542,96.542l93.02,93.02l96.543-96.543L462,232.428V50H279.572z"/>	</svg>	</button>	<div class="m-content" id="m-1">	<div class="close">x</div>	<div class="title"> <h3>Модальное окно 1</h3>	</div>	<img src="https://ununsplash.imgix.net/photo-1422284763110-6d0edd657b13?fit=crop&fm=jpg&h=1050&q=75&w=1050" alt="">	<ul class="s-icon horizontal">	<li> <a href=""> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <path class="path" d="M144.953,410.5c-14.216,0-25.75,11.533-25.75,25.75S130.737,462,144.953,462h222.631	c14.215,0,25.75-11.533,25.75-25.75s-11.535-25.75-25.75-25.75H144.953z M307.5,118.667h-34.334V153h-34.333v-34.333H204.5V84.333	h34.333V50h34.333v34.333H307.5V118.667z M462,258.146c0,55.254-35.943,90.125-68.666,118.02H118.667	C85.943,348.271,50,313.4,50,258.146c0-71.14,51.601-105.062,103.821-105.062c32.255,0,60.067,11.433,81.793,33.528	c-6.874,9.791-13.713,26.371-14.954,37.971c-16.664-21.877-38.29-37.167-66.839-37.167c-11.601,0-69.488,3.412-69.488,70.729	c0,33.176,17.15,56.73,47.208,83.688h248.917c30.058-26.957,47.207-50.512,47.207-83.688c0-67.318-57.887-70.729-69.487-70.729	c-55.255,0-84.995,57.494-102.179,109.723c-11.819-35.481-5.08-75.096,14.133-103.386c22.531-26.672,52.556-40.67,88.046-40.67	C410.399,153.084,462,187.006,462,258.146z"/>	</svg> </a> <li>	<a href=""> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <path class="path" d="M92.556,359c16.79,0,22.473-9.002,29.312-15.825C135.833,329.159,153,335.128,153,357.71V462h104.29	c22.582,0,28.551-17.167,14.544-31.131c-6.832-6.84-15.834-12.523-15.834-29.321C256,382.889,275.028,359,307.5,359	s51.5,23.889,51.5,42.548c0,16.798-9.002,22.481-15.825,29.321C329.159,444.833,335.128,462,357.71,462H462V357.71	c0-22.582-17.167-28.551-31.131-14.535c-6.84,6.823-12.523,15.825-29.321,15.825C382.889,359,359,339.972,359,307.5	s23.889-51.5,42.548-51.5c16.798,0,22.481,9.002,29.321,15.834C444.833,285.841,462,279.872,462,257.29V153H357.71	c-22.582,0-28.551-17.167-14.535-31.131c6.823-6.84,15.825-12.523,15.825-29.312C359,73.889,339.972,50,307.5,50	S256,73.889,256,92.556c0,16.79,9.002,22.473,15.834,29.312C285.841,135.833,279.872,153,257.29,153H153v104.29	c0,22.582-17.167,28.551-31.131,14.544C115.029,265.002,109.346,256,92.556,256C73.889,256,50,275.028,50,307.5	S73.889,359,92.556,359z"/>	</svg>	</a> <li> <a href=""> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <path class="path" d="M358.045,135.833c-19.531,0-40.788,2.213-58.256,8.433c-39.195,14.216-47.93,14.393-87.594,0	c-17.452-6.22-38.742-8.433-58.256-8.433c-33.831,0-71.584,6.639-103.939,15.071v30.704c14.535,4.384,18.34,10.763,20.654,25.624	c6.538,41.953,21.542,83.102,87.007,83.102c52.137,0,69.538-38.785,81.055-74.594c5.851-18.189,28.55-18.658,34.484-0.251	c11.551,35.858,28.868,74.845,81.106,74.845c65.48,0,80.502-41.148,87.023-83.102c2.312-14.861,6.119-21.24,20.67-25.624v-30.704	C429.611,142.472,391.875,135.833,358.045,135.833z M226.16,201.307c-8.885,37.317-23.336,71.859-68.499,71.859	c-56.664,0-68.214-32.665-73.395-85.363c-1.24-12.816,1.576-17.846,3.789-20.512c16.261-19.472,102.178-18.691,130.661-1.584	C226.864,170.603,232.161,176.018,226.16,201.307z M427.7,187.803c-5.163,52.698-16.731,85.363-73.394,85.363	c-45.131,0-59.598-34.542-68.482-71.859c-6.02-25.289-0.721-30.704,7.443-35.6c28.582-17.167,114.449-17.812,130.66,1.584	C426.158,169.957,428.975,174.986,427.7,187.803z M344.65,168.557c26.42-4.023,56.965-0.52,65.078,9.213	c1.777,2.129,4.023,6.152,3.018,16.403c-0.536,5.432-1.156,10.578-1.928,15.457C403.795,184.114,385.822,170.435,344.65,168.557z M101.165,209.63c-0.771-4.879-1.408-10.025-1.944-15.457c-1.006-10.251,1.257-14.274,3.034-16.403	c8.131-9.732,38.675-13.236,65.096-9.213C126.177,170.435,108.206,184.114,101.165,209.63z M376.166,342.923	C356.418,392.177,272.631,380.106,256,349.26c-16.647,30.847-100.418,42.917-120.167-6.337c9.924,8.685,26.873,11.483,39.798,9.589	c38.105-5.582,35.054-41.592,61.693-41.592c7.292,0,13.897,3.034,18.675,7.963c4.777-4.929,11.366-7.963,18.658-7.963	c26.639,0,23.604,36.01,61.693,41.592C349.277,354.406,366.226,351.607,376.166,342.923z"/>	</svg> </a>	<li> <a href=""> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <path class="path" d="M204.45,290.082c0.168,18.959-15.104,34.466-34.089,34.583	c-18.977,0.151-34.425-15.104-34.526-34.063c-0.168-18.969,15.096-34.417,34.023-34.593	C188.842,255.882,204.349,271.154,204.45,290.082z M187.661,221.65c-18.96,0.134-34.476-15.113-34.593-34.115	c-0.151-18.926,15.063-34.392,34.056-34.517c18.918-0.176,34.476,15.054,34.543,34.031	C221.868,206.043,206.562,221.475,187.661,221.65z M324.665,152.741c0.066,18.927-15.12,34.476-34.081,34.601	c-18.977,0.159-34.467-15.104-34.584-34.056c-0.185-18.985,15.071-34.433,34.082-34.584	C308.975,118.593,324.497,133.823,324.665,152.741z M118.668,424.78c78.741,6.521,50.544-77.114,123.4-77.886l31.551,26.32	C281.48,468.268,165.205,489.49,118.668,424.78z M360.121,302.639c24.493-38.433,100.367-167.332,100.367-167.332	c6.035-10.687-7.377-21.852-16.748-13.965c0,0-112.822,98.087-146.098,129.176c-26.304,24.584-26.412,35.817-34.93,76.343	l28.826,24.023C329.761,335.193,340.759,333.048,360.121,302.639z M143.445,385.151c-35.774-31.249-58.708-76.915-59.102-127.844	c-0.754-94.583,75.64-172.176,170.298-172.947c65.883-0.352,111.23,32.699,111.515,59.169c10.411-9.128,20.151-17.644,28.55-24.986	c-17.334-38.156-71.785-69.437-140.35-68.523C140.637,50.95,49.105,143.831,50.011,257.584	c0.394,49.982,18.583,95.614,48.457,131.054C114.913,397.087,134.912,394.287,143.445,385.151z M363.122,352.427	c18.172,33.83-23.201,57.837-60.853,68.531c-5.23,15.658-13.781,29.539-23.588,39.665c90.208-10.126,155.554-73.88,107.559-135.421	C378.36,336.954,370.851,345.755,363.122,352.427z"/>	</svg>	</a>	</ul>	</div>	<button class="open" id="o-2">2	<svg class="after" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">	<path class="b" d="M187.765,417.257L232.431,462H50V279.572l44.744,44.666l97.597-97.597l93.02,93.02L187.765,417.257z M279.572,50l44.666,44.743l-96.542,96.542l93.02,93.02l96.543-96.543L462,232.428V50H279.572z"/>	</svg>	</button>	<div class="m-content" id="m-2">	<div class="close">x</div>	<div class="title">	<h3>Модальное окно 2</h3>	<p class="meta">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro accusantium sequi ipsam earum nulla id!</p>	</div>	<a href="#" class="img-wrap"> </a>	<ul class="s-button horizontal">	<li>	<button type="submit">	<svg class="i" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">	<path class="path-2" d="M50,236.16c47.389,9.879,111.237,24.502,157.389,54.545C261.584,218.087,356.056,148.706,462,92.873	c-100.611,99.166-185.675,213.119-242.136,326.254C174.349,354.473,126.438,298.773,50,236.16z"/>	</svg>	</button>	<li>	<button type="reset">	<svg class="i" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">	<path class="path-2" d="M432.546,133.462L367.133,76.39L254.078,210.715L140.967,73.702l-61.513,65.068	c33.791,43.885,78.146,89.797,123.688,132.465L82.993,413.987l19.865,22.629c29.251-20.31,87.839-65.578,150.312-120.092	c63.662,55.812,122.861,101.336,151.301,121.773l21.438-19.443L303.804,270.95C352.439,225.709,399.308,177.442,432.546,133.462z"/>	</svg>	</button>	</ul>	</div>	<button class="open" id="o-3">3	<svg class="after" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">	<path class="b" d="M187.765,417.257L232.431,462H50V279.572l44.744,44.666l97.597-97.597l93.02,93.02L187.765,417.257z M279.572,50l44.666,44.743l-96.542,96.542l93.02,93.02l96.543-96.543L462,232.428V50H279.572z"/>	</svg>	</button>	<div class="m-content" id="m-3">	<div class="close">x</div>	<div class="title">	<h3>Модальное окно 3</h3>	<ul class="star horizontal">	<li>	<a href="">	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">	<polygon class="star-s" points="256,60.082 318.979,190.002 462.001,209.75 357.9,309.793 383.315,451.918 256,383.828	128.685,451.918 154.1,309.793 49.999,209.75 193.021,190.002 "/>	</svg>	</a>	<li>	<a href="">	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">	<polygon class="star-s" points="256,60.082 318.979,190.002 462.001,209.75 357.9,309.793 383.315,451.918 256,383.828	128.685,451.918 154.1,309.793 49.999,209.75 193.021,190.002 "/>	</svg>	</a>	<li>	<a href="">	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">	<polygon class="star-s" points="256,60.082 318.979,190.002 462.001,209.75 357.9,309.793 383.315,451.918 256,383.828	128.685,451.918 154.1,309.793 49.999,209.75 193.021,190.002 "/>	</svg>	</a>	<li>	<a href="">	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">	<polygon class="star-s" points="256,60.082 318.979,190.002 462.001,209.75 357.9,309.793 383.315,451.918 256,383.828	128.685,451.918 154.1,309.793 49.999,209.75 193.021,190.002 "/>	</svg>	</a>	<li>	<a href="">	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">	<polygon class="star-l" points="256,60.082 318.979,190.002 462.001,209.75 357.9,309.793 383.315,451.918 256,383.828	128.685,451.918 154.1,309.793 49.999,209.75 193.021,190.002 "/>	</svg>	</a>	</ul>	</div>	<img src="https://unsplash.imgix.net/photo-1431184052543-809fa8cc9bd6?fit=crop&fm=jpg&h=800&q=75&w=1050" alt="">	<div class="bottom">	<span>Lorem ipeum</span>	<a href="#" class="more">view more</a>	</div>	</div>	<div class="mask"></div>	</div>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Modal - Script Codes CSS Codes

* {	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;	box-sizing: border-box;	}	html, body, .modal-wrap {	width: 100%; height: 100%;	margin: 0; padding: 0;	overflow: hidden;	}	body {	font-family: 'Roboto', sans-serif;	color: #FFF;	font-size: 16px;	line-height: 1.4;	font-weight: normal;	}	h1, h2, h3 {	font-family: 'Roboto', sans-serif;	}	h1 {	font-size: 43px;	margin: 35px 0 45px;	font-weight: bold;	}	h3 {	color: #FFF;	font-size: 27px;	display: inline-block;	width: 100%;	padding: 17px 7px;	margin: 0;	}	img {	width: 100%;	max-width: 100%;	height: auto;	}	button {	border: none;	outline: none;	color: #FFF;	font-size: 20px;	font-weight: bold;	padding: 10px 25px;	text-align: left;	margin: 25px;	-webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.35); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.35); width: 120px; position: relative;	}	button:hover {	cursor: pointer;	}	.b {	fill: #FFF;	}	.after {	display: block;	width: 50px;	height: 42px;	position: absolute;	top: 0px;	right: 0px;	padding: 10px 10px;	border-left: 1px solid #FFFFFF;	}	.horizontal {	list-style: none;	padding: 0;	margin: 0;	text-align: center;	}	.horizontal li {	display: inline-block;	vertical-align: middle;	}	.modal-wrap {	/*background: url(https://unsplash.imgix.net/photo-1428677361686-f9d23be145c9?fit=crop&fm=jpg&h=700&q=75&w=1050) center no-repeat;	-webkit-background-size: cover; background-size: cover;
*/	text-align: center;	position: relative;	}	.blur {	-webkit-filter: blur(5px); filter: blur(5px); position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;	}	#o-1 { background: #28B9D4; }	#o-1:hover { background: #26B1CB; }	#o-2 { background: #2DBAA7; }	#o-2:hover { background: #2EB2A0;}	#o-3 { background: #F0793F; }	#o-3:hover { background: #E07642; }	.mask {	background: rgba(0,0,0,.75);	position: absolute;	top: 0; left: 0; right: 0; bottom: 0;	z-index: 3;	display: none;	}	.m-content {	max-width: 300px;	width: 100%;	position: absolute;	z-index: 5;	left: 50%;	margin-left: -150px;	overflow: hidden;	top: 50%;	margin-top: -150px;	border: 1px solid #ccc;	background: #FFF;	text-align: center;	-webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.35); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.35);	display: none;	}	.m-content img {	max-height: 200px;	height: 100%;	}	.close {	content: '';	display: block;	width: 20px;	height: 20px;	line-height: 20px;	color: #eaeaea;	font-size: 18px;	font-weight: lighter;	position: absolute;	right: 10px;	top: 10px;	}	.close:hover {	cursor: pointer;	color: #FFF;	}	/* ====== Модальное окно 1 ====== */	#m-1 .title {	background: #5AC6E2;	}	.s-icon li {	width: 25%;	padding: 10px 0;	}	.s-icon li+li {	border-left: 1px solid rgb(93, 93, 93);	}	.s-icon li a {	display: inline-block;	vertical-align: middle;	width: 50px;	height: 50px;	}	.s-icon li a:hover .path {	fill: #32B1D1;	}	.path {	fill: #747474;	}	/* ====== Модальное окно 2 ====== */	#m-2 {	margin-top: -200px;	/*margin-left: -175px;*/	/*max-width: 350px;*/	}	#m-2 .title {	background: #1FBBA6;	padding-bottom: 20px;	}	.meta {	color: #FFF;	margin: 0;	}	.img-wrap {	border-radius: 100%;	width: 170px;	height: 170px;	margin: 17px 0;	display: inline-block;	vertical-align: middle;	background: url(https://m1.behance.net/rendition/modules/50393393/disp/05d8e97450a4564f4ca3d53c7a1544e9.png) center no-repeat;	-webkit-background-size: cover;	background-size: cover;	-webkit-transition: all .35s ease-in-out; -o-transition: all .35s ease-in-out; transition: all .35s ease-in-out;	}	.img-wrap:hover {	-webkit-transform: rotate(360deg);	-ms-transform: rotate(360deg);	-o-transform: rotate(360deg);	transform: rotate(360deg);	}	#m-2 button {	display: inline-block;	vertical-align: middle;	margin: 0;	width: 100%;	height: 43px;	padding: 10px 5px;	border: none;	text-align: center;	outline: none;	border-radius: 0px;	}	#m-2 h3 {	margin-bottom: 10px;	padding: 7px;	}	.path-2 {	fill: #FFF;	}	.s-button {	margin-bottom: 17px;	}	.s-button li {	width: 40%;	margin: 0 10px;	}	.s-button .i {	width: 20px;	height: 20px;	}	button[type='submit'] {	background: rgb(33, 192, 98);	}	button[type='submit']:hover {	background: rgb(41, 161, 90);	}	button[type='reset'] {	background: rgb(207, 56, 83);	}	button[type='reset']:hover {	background: rgb(181, 67, 87);	}	/* ====== Модальное окно 3 ====== */	#m-3 {	border: none;	}	#m-3 .title {	background: #323A45;	padding: 0 40px 20px;	}	.star li a {	display: block;	width: 20px;	height: 20px;	}	.star-s {	fill: #F17834;	}	.star-l {	fill: #000;	}	#m-3 img {	margin-bottom: -7px;	max-height: 450px;	}	.bottom {	display: block;	width: 100%;	padding: 15px 5px;	margin: 0;	background: #323A45;	overflow: hidden;	}	#m-3 span {	display: inline-block;	vertical-align: middle;	float: left;	color: #FFF;	font-weight: bold;	padding: 5px 10px;	}	.more {	display: inline-block;	vertical-align: middle;	color: #FFF;	background: #F17834;	font-size: 17px;	padding: 5px 10px;	float: right;	margin-right: 20px;	text-decoration: none;	}	.more:hover {	background: #E47232;	}	@media screen and (min-width: 320px ) {	#m-3 {	max-width: 250px;	margin-left: -150px;	}	}	@media screen and (min-width: 480px ) {	#m-1 {	max-width: 400px;	margin-left: -200px;	}	#m-2 {	max-width: 350px;	margin-left: -175px;	}	}	@media screen and (min-width: 510px ) {	#m-1 {	max-width: 500px;	margin-left: -250px;	}	}

Modal - Script Codes JS Codes

$(document).ready(function() { var open = $(".open"), // Кнопки открытия окна o1 = $("#o-1"), o2 = $("#o-2"), o3 = $("#o-3");	var modal = $(".m-content"), // Модальные окна m1 = $("#m-1"), m2 = $("#m-2"), m3 = $("#m-3");	var overlay = $(".mask"); // Подложка	var close = $(".close, .mask"); // Закрытие окна	open.click(function(e){ // Отслеживаем событие	e.preventDefault(); // Отключаем стандартное поведение	$(this).next(".m-content").show(1000); // Показать окно	overlay.show(800); // Показать подложку	});	close.click(function(){ // Закрытие при клике на x	overlay.hide(500); // Скрытие подложки	modal.hide(100); // Скрытие окна	});
});
Modal - Script Codes
Modal - Script Codes
Home Page Home
Developer Elena
Username semenchenko
Uploaded December 17, 2022
Rating 3
Size 9,533 Kb
Views 8,096
Do you need developer help for Modal?

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!

Elena (semenchenko) Script Codes
Name
Slider CSS Only
Zen cube
VideoBg
Pricing Table
Card
Calc.js
Css piramide
3d css cube
Fish 2d game only CSS
A Pen by Elena
Create amazing SEO content 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!