Edit on
<section id="ios7">
  <!-- Choose your URL -->
  <iframe id="iframe" src="http://pleeease.io" frameborder="0" width="700" height="400"></iframe>
  
  <p>Only works in Firefox</p>
<svg height="0">
<filter id="popupFiltre" x="0" y="0" width="100%" height="100%">
<feGaussianBlur stdDeviation="2" in="SourceGraphic" result="flou">
</feGaussianBlur>
<feColorMatrix type="saturate" values="0.5" in="flou" result="desat"/>
<feFlood flood-color="rgba(0,0,0,.7)" result="t1" width="100%" height="100%" x="0" y="0"/>
<feComposite in="t1" in2="desat" operator="atop" />
</filter>
</svg>
</section>

<div class="popup">
  <p class="popup-text">Drag me around.</p>
  <div class="popup-back"></div>
</div>
html{
  background: #ddd;
  text-align: center;
}
body {
  margin: 0;
}
#ios7{
  overflow: hidden;
}
h1{
  padding: 1em; 
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}
iframe{
  display: block;
  margin: 50px auto 0 auto;
  box-shadow: 0 0 5px rgba(0,0,0,.5);
}

.popup{
  position:absolute; 
  top: 120px; left: 50%; margin-left: -150px;
  z-index:100;
  width:300px; height:200px;
  text-shadow:1px 1px 1px black;
  border-radius:3px;
  box-shadow:0 1px 0 black,0 1px 0 rgba(255,255,255,.4) inset,0 10px 20px 10px rgba(0,0,0,.7);
  background-color: rgba(0,0,0,.6);
  border:1px solid black;
  font:1.5em sans-serif;
  cursor:move;
}
.popup-text{
  position: absolute; z-index:110;
  left: 0; right: 0; bottom: 0; top: 0; 
  width: 200px; height: 1em; margin: auto;
  text-align: center;
  color: #eee;
}
.popup-back{
    position: absolute;
    z-index: 100;
    width: 100%; height:100%;
}
@supports ( (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) ) {
  .popup-back {
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
  }
}

@supports ( not (backdrop-filter: blur(1px)) ) and (background: -moz-element(#back)) {
  .popup-back{
    background: -moz-element(#ios7) no-repeat 0 0 fixed;
    filter: url(#popupFiltre);
  }
}
$(function(){
  $('.popup').draggable();
});
Rerun