Popup Shell Prototype

by Ben Clayton

HTML

<div class="masker"></div>
<div class="fixlayer1 fixlayer">
    <div class="pop1 jqpopupcls">
        <button  class="butclose">X</button>
        <button  class='test' id="but2">HotDirectory</button>
        <button  class='test' id="but3">Add Content</button>
        <div class="inner"></div>       
    </div>
</div>
<div class="fixlayer2 fixlayer">
    <div class="pop2 jqpopupcls">
        <button  class="butclose">X</button>
        <div class="inner"></div>
    </div>
</div>
<div class="fixlayer3 fixlayer">
    <div class="pop3 jqpopupcls">
        <button  class="butclose">X</button>
        <div class="inner"></div>
    </div>
</div>


<h1>Popup Demo...</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<br/> <br/>
<button class="but1">Popup (random content)</button>
<button class="but4">Popup With Video</button>
<button class="but5">Popup Inner Scroll - option</button>
<div class="duff"></div>

<button class="but4">Popup With Video</button>
<button class="but5">Popup Inner Scroll - option</button>

CSS

.masker {
  display: none;
  background: #888;
  opacity: 0.7;
  position: fixed;
  top: -100px;
  left: -100px;
  bottom: -100px;
  right: -100px;
  z-index: 1;
}

.fixlayer {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  overflow:auto;

}

.fixlayer.fixlayer2 {
  z-index: 5;  
}

.jqpopupcls {
    transition:all 0.4s ease-out;
    position:relative;
    border:4px solid red;
    border-radius:20px;
    width:80%;
    margin-left:auto;
    margin-right:auto;
    opacity: 0.95;
    background-color:#FFFFFF;
    color:#000000;
    z-index:3;
    padding:20px;
    top:20px;
}

.jqpopupcls.pop2 {
    z-index:6;
    height:600px;
    width:250px;
}

button {
    border:2px solid grey; 
    border-radius:10px;
}

.butclose {
    border-radius:50%;
    position:absolute;
    top:-20px;
    right:-20px;
    border:2px solid red;
    font-size:24px;
    background-color:#FFDDDD;
    z-index:10;
    width:40px;
    height:40px;
    padding:0;
}

.video {
    width:97%;
    margin-left:auto;
    margin-right:auto;
    height:300px;
    border:3px solid grey;
    text-align:center;
    line-height:300px;
}
.video span {vertical-align:middle}
.duff {height:2000px;}

JavaScript

$(".but1").on('click',function(){
    var $p = $(".pop1");
    reset($p);
    var s="some text ";
    for (var x=0;x<(Math.random()*8+4);x++){s=s+s;}
    $p.find(".inner").html(s);
    $(".masker").show().css('z-index',$p.css('z-index')-2);
    $p.parent().show();
    centerit($p);
});

$(".but4").on('click',function(){
    var $p = $(".pop1");
    reset($p);
    $(".masker").show().css('z-index',$p.css('z-index')-2);
    $p.find('button.test').hide();
    $p.parent().show();
    centerit($p);
    setTimeout(function(){
        $p.find(".inner").html("<div class='video'><span>VIDEO</span></div>");
        centerit($p);
    },3000);
    $(window).on('resize',function(){centerit($p);});
});

$(".but5").on('click',function(){
    var $p = $(".pop3");
    reset($p);
    var s="some text ";
    for (var x=0;x<8;x++){s=s+s;}
    s = "START "+s+" END.";
    $p.find(".inner").html("<div class='scroll-inner'>"+s+"</div>");
    $(".masker").show().css('z-index',$p.css('z-index')-2);
    $p.parent().show();
    fullsizeit($p);
});

$("#but2").on('click',function(){
   var $p = $(".pop2");
   $p.find(".inner").html("<h3>Hotdirectory</h3>");
    $(".masker").show().css('z-index',$p.css('z-index')-2);
    $p.parent().show();
    centerit($p);
});

$(".but3").on('click',function(){
   $(this).next().html($(this).next().html()+"line<br>");
});

$(".butclose").on('click',function(){
    //debugger;
    var z=$(this).parent().css('z-index');
    z=z-2;
    if (z>1){
        $(".masker").css('z-index',1);
    }else{
        $(".masker").hide();
    }
    $(this).closest(".fixlayer").hide();
});

function centerit($p){
    var wh=$(window).height();
    var dh=$p.height();
    var t=(wh-dh)/2.3;
    if(t<20){
        t=20
        $p.css('margin-bottom','20px');
    }
    $p.css('top',t+'px');
}

function fullsizeit($p){
    var wh=$(window).height();
    var dh=$p.height();
    var t=(wh-dh)/2.3;
    if(t<20){
        t=20
        $p.css('margin-bottom','20px');
    }
   ...