basti1012.bplaced.net

Erstbesucher einmal ein Pop-up anzeigen und auf Bestätigung des Besuchers wird e dauerhaft ausgeblendet

Code

                                    
                                <script src="/js_webseite/jquery.js"></script>
<link rel="stylesheet" href="/css_webseite/animate.css">
 <style>
   #animationSandbox{
  height:395px;
  width:504px;
  position:fixed;
  top:10px;
  left:calc(50% - 100px);
  display:none;
  overflow:hidden;
  background:#123456;
  border:2px solid black;
    backface-visibility: hidden; 
    line-height: 1;
    color: #f35626;

}
#XX{
  height:30px;
  width:20px;
  font-size:20px;
  color:white;
  background:red;
  border:1px solid black;
  cursor:pointer;
}
#XX:hover{
  color:green;
  background:black;
}
#line1{
  display:flex;
}
#ueber{
  width:calc(100% - 2px);
  display:block;
  border:1px solid red;
  text-align:center;
}
#mehrinfo{
  font-size:24px;
  width:100%;
  animation:lauf 3s linear infinite;
  overflow:hidden;
}
@keyframes lauf{
  0%{
    margin-left:-100px;
  }
  100%{
    margin-left:100%;
  }
}

   
</style>
<div id="animationSandbox" class="popupanimate modal">
  <div id="line1">
     <span id="XX">X</span>
     <span  id="ueber">Überschrift  / Bzw Titel</span>
  </div>
  <div id="basti1012"></div>
  <button id="popkill">Video nicht mehr zeigen</button>
  <span id="mehrinfo">Lauftext</span>
  </div>
<div id="info"></div>
<script>
  animation=["fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInRight","fadeInUp","flip","flipInX","flipInY","lightSpeedIn","pulse","rubberBand","shake","wobble","swing","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","rollIn","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpLeft"];

var animationausgewahlt=animation[6]; // 0 = fadeIn 1= fadeInDow usw..
var uberschrift='Überschrift des Popups';
var lauftext='Ab December neu';
var cname='moviestreamvideopopup';//speichername des Cookies. Nicht mehr ändern
var cvalue='30112015';// wenn cokkie überschrieben werden soll hier neuen wert eingeben. Zbdatumohne punkte
var exdays=365;//wie lanhge soll der Cookie gespeichert werden
//bei fragen oder probleme bei basti1012 melden
function testAnim(x) { 
    $('.modal').css('display','block');
    $('#ueber').html(uberschrift);
    $('#mehrinfo').html(lauftext);
    setTimeout(function(){
          los=document.createElement('iframe');
          los.id='videoiframe';
          los.style.border='2px solid red';
          los.src='media/dreamscapes.mp4';
          los.width='500px';
          los.height='330px';
          document.getElementById("basti1012").appendChild(los);    
    },1000);
    $('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
         $(this).removeClass();
     });
}
       

jQuery(document).ready(function () {
    var username = getCookie(cname);
    if (username != "") {
        if(username==cvalue){
        }else{
            weiter();
        }
     }else{
         weiter()
     }
     function  weiter(){
         $('#info').html('öffne popup video');
         var anim = animationausgewahlt;
         testAnim(anim);
         setCookie(cname, cvalue, exdays);
     }
});
    
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

$('#popkill,#XX').click(function(){
       $('#animationSandbox').css('display','none');
       $('#videoiframe').remove();            
})

  
</script>