Můj Xmodal V2

Nejbožejší a nejjednodušší modal okna od HAP

by Petr Haluza

HTML

<button open-modal="test1">Obyč modal</button>
<br><br>
<button open-modal="test2">kaskádový modal s přetečením obsahu</button>



<div class="Xmodal XmMd" id="test1"><!-- /XmXl (velký) /XmMd (střední) /XmSm (malý) -->
	<div class="Xbox">
		<div class="close" close-modal>
   		<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#csfr)"><path stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M7 7.6L17 17.1M7 17.1L17 7.6"></path></g><defs><clipPath id="csfr"><rect width="24" height="24"></rect></clipPath></defs></svg>
		</div>
    
      <header>
        <h3>Nečekaně jsem modal!</h3>
      </header>
      
			<main>
				<p>Obsah</p><p>Obsah</p><p>Obsah</p><p>Obsah</p><p>Obsah</p><p>Obsah</p><p>Obsah</p><p>Obsah</p><p>Obsah</p><p>Obsah</p><p>Obsah</p><p>Obsah</p>
      </main>
      
			<footer>
        <button close-modal>Zavřít</button>
				<button cta>CTA</button>
      </footer>
    
	</div><!-- /Xbox-->
</div><!-- /Xmodal -->


<div class="Xmodal XmXl" id="test2"><!-- /XmXl (velký) /XmMd (střední) /XmSm (malý) -->
	<div class="Xbox">
		<div class="close" close-modal>
   		<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#csfr)"><path stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M7 7.6L17 17.1M7 17.1L17 7.6"></path></g><defs><clipPath id="csfr"><rect width="24" height="24"></rect></clipPath></defs></svg>
		</div>
    
      <header>
        <h3>Nečekaně jsem  modal!</h3>
      </header>
      
			<main>
				<button open-modal="test3" style="background:#4a9">Kouzlím!</button><br><br>
				<p>Mám toho v sobě tolik, že...

CSS

.Xmodal { position: fixed; left: 0; top: 0; bottom: 0; right: 0;z-index: -1; display: flex; justify-content: center; align-items: center; background: #fffe;  backdrop-filter: blur(3px); opacity: 0; transition: 0.2s;}
.Xmodal.active { opacity: 1; pointer-events: auto; z-index: 999}

.Xmodal > .Xbox {  position: absolute; transform: translateY(100px);  transition: 0.2s; background: #f4f5f7; box-shadow: 0 0 30px -10px #384857; width: 100%; max-height: 100vh; border-radius: 6px; position: relative; overflow:hidden; display: flex; flex-direction: column}
.Xmodal.active > .Xbox { transform: translateY(0px) ;}

.Xmodal > .Xbox:before { content:""; position: absolute; left: 0; top: 0; bottom: 0; right: 0;box-shadow: 0 0 0 2.5px white inset; pointer-events: none}

.Xmodal header { padding: 30px 30px 15px; text-align: center}
.Xmodal main {  padding: 0 30px; flex-shrink: 1; overflow: auto;}
.Xmodal footer { padding: 15px 30px 30px; margin-top: auto; display: flex}

.Xmodal .close { position: absolute; right: .5em; top: .5em; cursor: pointer; stroke: #456}
.Xmodal .close svg {height:30px}
.Xmodal .close:hover { stroke: #ea0000}


.XmXl .Xbox { flex-basis: calc(100% - 10em); max-width: 1200px; min-height: 75vh; }
.XmMd .Xbox { flex-basis: calc(75% - 10em); max-width: 800px; min-height: 50vh; }
.XmSm .Xbox { flex-basis: calc(50% - 10em); max-width: 500px; min-height: 40vh; }

@media all and (max-width: 1024px) {
    .XmXl .Xbox { flex-basis: 100%}
}
@media all and (max-width: 768px) {
    .XmMd .Xbox,
		.XmSm .Xbox{ flex-basis: 100%}
}
@media all and (min-width: 992px) {
	.Xmodal .Xbox {max-height: 90vh}
}

.Xmodal main { background:	linear-gradient(#f4f5f7 30%, rgba(255,255,255,0)),linear-gradient(rgba(255,255,255,0), #f4f5f7 70%) 0 100%,	linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,0)), linear-gradient(to top, rgba(0,0,0,.1), rgba(0,0,0,0)) 0 100%;
	background-repeat: no-repeat;	background-size: 100% 40px, 100% 40px, 100% 20px, 100% 20px;background-attachment:...

JavaScript

$('[open-modal]').on('click', function(){
  var id = $(this).attr('open-modal');
  $('.Xmodal#'+id).addClass('active');
});

$('[close-modal]').on('click', function(){
  $(this).parents('.Xmodal').removeClass('active');
});

$('.Xmodal').on('click', function(e) {
  if(e.target !== this){return};
  $(this).removeClass('active');
});