Multi modaly na sobě

by Petr Haluza

HTML

<button open-modal="test1">modal</button>, <a nohref open-modal="test1">modal</a>
<br><br>
<button open-modal="test3">kaskádový modal</button>



<div class="Xmodal" id="test1">
  <div class="box">
   <div class="close" close-modal>x</div>
    <div class="Xmodal-content">
      <header>
        <h3>Nečekaně jsem modal!</h3>
      </header>
      <main>
        <p>Nečekaně jsem modal!</p>
      </main>
      <footer>
        <button close-modal>Zavřít</button>
      </footer>
    </div><!-- /Xmodal-content -->
  </div><!-- /box-->
</div><!-- /Xmodal -->




<div class="Xmodal" id="test3">
  <div class="box">
   <div class="close" close-modal>x</div>
    <div class="Xmodal-content">
      <main>
        <h1>Nečekaně jsem modal!</h1>
        <button open-modal="test4">Druhý modal</button>
      </main>
    </div><!-- /Xmodal-content -->
  </div><!-- /box-->
</div><!-- /Xmodal -->

<div class="Xmodal" id="test4">
  <div class="box">
   <div class="close" close-modal>x</div>
    <h1>Abrakadabra!</h1>
  </div>
</div>

CSS

.Xmodal { position: fixed; top: 0px; pointer-events: none; left: 0px; background: rgba(51, 51, 51, 0.9); width: 100vw; height: 100vh; z-index: 100; opacity: 0; transition: 0.3s;}
.Xmodal.active { opacity: 1; pointer-events: auto;}
.Xmodal.active .box { top: 50%;}

.Xmodal .close { position: absolute; top: -20px; right: -20px; cursor: pointer; color: #ddd;}
.Xmodal .box { background: #fff; display: block; border-radius: 5px; text-align: center; padding: 20px; position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%); transition: 0.3s;}
.Xmodal-content { max-height: calc(100vh - 100px); overflow-y: auto;}
.Xmodal-content header { margin-bottom: 1em;}
.Xmodal-content footer { margin-top: 1em;}

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');
});