alex-boom · March 2, 2021 16:31
diff --git a/modal-window.html b/modal-window.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>modal window</title>
  <style>
    body.open-modal {
      overflow: hidden;

      .modal-overlay-box {
        opacity: 1;
        z-index: 9999;
      }
    }

    .modal-overlay-box {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, .3);
      opacity: 0;
      z-index: -1;
      transition: all .3s ease-out;

      .modal-box {
        position: relative;
        overflow: auto;
        background: white;
        padding: 40px 10px 20px;
        height: 100%;

        article {
          text-align: center;
        }

        ul {
          >li {
            margin-bottom: 10px;
          }
        }

        h2 {
          color: #8F703A;
          font-weight: 700;
        }

        h3 {
          color: #8F703A;
          font-weight: 700;
        }

        strong {
          color: #8F703A;
          font-weight: 700;
        }

        .close {
          position: absolute;
          cursor: pointer;
          right: 25px;
          top: 10px;
          width: 25px;
          height: 20px;
          opacity: 0.3;

          &:hover {
            opacity: 1;
          }

          &:before {
            content: '';
            position: absolute;
            left: 15px;
            height: 25px;
            width: 2px;
            background-color: #333;
            transform: rotate(45deg);
          }

          &:after {
            content: '';
            position: absolute;
            left: 15px;
            height: 25px;
            width: 2px;
            background-color: #333;
            transform: rotate(-45deg);
          }
        }
      }
    }

    @media (min-width: 768px) {
      .modal-overlay-box {
        display: flex;
        align-items: center;
        justify-content: center;

        .modal-box {
          width: 100%;
          height: auto;
          max-width: 700px;
          max-height: 700px;
          padding: 40px;
          border-radius: 5px;

          .close {
            top: 20px;
          }
        }
      }
    }
  </style>
 </head>

 <body>
  <a href="#" class="opener">opener</a>
  <div class="modal-overlay-box">
    <div class="modal-box">
      <span class="close"></span>
      <article>
        <h2>Machen Sie es sich Zuhause schön!</h2>
        <p>Aus gegebenen Anlass sind unsere Ausstellungsräume leider vorübergehend geschlossen.</p>
        <h3>Damit sich Ihr Wohntraum erfüllt - sind wir weiterhin für Sie da:</h3>
      </article>


      <ul>
        <li>Gerne beraten wir Sie rund um das Thema »Wohnen« per Telefon
          Mo - Sa: 10 - 19 Uhr <strong>Telefonzeichen bitte einfügen</strong> <a href="tel:+499391504321">+49 9391
            504-321</a></li>
        <li>Produktbilder, Holz- und Stoffmuster senden wir Ihnen auf Wunsch zur Auswahl zu</li>
        <li>Der Versand von Wohnaccessoires erfolgt portofrei</li>
        <li>Die Auslieferung von Sofa, Sessel, Leuchter & Co. erfolgt durch Mitarbeiter unseres Hauses</li>
        <li>Über Ihre Nachrichten freuen wir uns auch per <strong>E-mailzeichen bitte einfügen</strong>
          <a href="mailto:[email protected]">[email protected]</a></li>
      </ul>
    </div>
  </div>
  <script>
    const initModalBox = () =>
    {
      const modalBox = $('.modal-overlay-box');
      const openBtn = $('.opener');
      const closeBtn = modalBox.find('.modal-box .close');

      openBtn.on('click', function (e)
      {
        e.preventDefault();
        $('body').addClass('open-modal');
      });
      closeBtn.on('click', function ()
      {
        $('body').removeClass('open-modal');
      });
    };
    initModalBox();
  </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>modal window</title>
	<style>
	body.open-modal {
	overflow: hidden;

	.modal-overlay-box {
	opacity: 1;
	z-index: 9999;
	}
	}

	.modal-overlay-box {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .3);
	opacity: 0;
	z-index: -1;
	transition: all .3s ease-out;

	.modal-box {
	position: relative;
	overflow: auto;
	background: white;
	padding: 40px 10px 20px;
	height: 100%;

	article {
	text-align: center;
	}

	ul {
	>li {
	margin-bottom: 10px;
	}
	}

	h2 {
	color: #8F703A;
	font-weight: 700;
	}

	h3 {
	color: #8F703A;
	font-weight: 700;
	}

	strong {
	color: #8F703A;
	font-weight: 700;
	}

	.close {
	position: absolute;
	cursor: pointer;
	right: 25px;
	top: 10px;
	width: 25px;
	height: 20px;
	opacity: 0.3;

	&:hover {
	opacity: 1;
	}

	&:before {
	content: '';
	position: absolute;
	left: 15px;
	height: 25px;
	width: 2px;
	background-color: #333;
	transform: rotate(45deg);
	}

	&:after {
	content: '';
	position: absolute;
	left: 15px;
	height: 25px;
	width: 2px;
	background-color: #333;
	transform: rotate(-45deg);
	}
	}
	}
	}

	@media (min-width: 768px) {
	.modal-overlay-box {
	display: flex;
	align-items: center;
	justify-content: center;

	.modal-box {
	width: 100%;
	height: auto;
	max-width: 700px;
	max-height: 700px;
	padding: 40px;
	border-radius: 5px;

	.close {
	top: 20px;
	}
	}
	}
	}
	</style>
	</head>

	<body>
	<a href="#" class="opener">opener</a>
	<div class="modal-overlay-box">
	<div class="modal-box">
	<span class="close"></span>
	<article>
	<h2>Machen Sie es sich Zuhause schön!</h2>
	<p>Aus gegebenen Anlass sind unsere Ausstellungsräume leider vorübergehend geschlossen.</p>
	<h3>Damit sich Ihr Wohntraum erfüllt - sind wir weiterhin für Sie da:</h3>
	</article>


	<ul>
	<li>Gerne beraten wir Sie rund um das Thema »Wohnen« per Telefon
	Mo - Sa: 10 - 19 Uhr <strong>Telefonzeichen bitte einfügen</strong> <a href="tel:+499391504321">+49 9391
	504-321</a></li>
	<li>Produktbilder, Holz- und Stoffmuster senden wir Ihnen auf Wunsch zur Auswahl zu</li>
	<li>Der Versand von Wohnaccessoires erfolgt portofrei</li>
	<li>Die Auslieferung von Sofa, Sessel, Leuchter & Co. erfolgt durch Mitarbeiter unseres Hauses</li>
	<li>Über Ihre Nachrichten freuen wir uns auch per <strong>E-mailzeichen bitte einfügen</strong>
	<a href="mailto:[email protected]">[email protected]</a></li>
	</ul>
	</div>
	</div>
	<script>
	const initModalBox = () =>
	{
	const modalBox = $('.modal-overlay-box');
	const openBtn = $('.opener');
	const closeBtn = modalBox.find('.modal-box .close');

	openBtn.on('click', function (e)
	{
	e.preventDefault();
	$('body').addClass('open-modal');
	});
	closeBtn.on('click', function ()
	{
	$('body').removeClass('open-modal');
	});
	};
	initModalBox();
	</script>
	</body>

	</html>