Question

我需要在点击Cookie横幅后显示带有youtube视频的模式，以便接受。现在，在此操作之后，页面刷新和视频正确启动，但也将视频启动到模态框中。

这是代码：

JS

jQuery(document).ready(function() { 


        var id = '#dialog';

        //prendi dimensioni schermo
        var maskHeight = jQuery(document).height();
        var maskWidth = jQuery(window).width();


        //if (jQuery('#cc-approve-button-thissite').click(function(){
            //jQuery('#mask').css({'display', none});

            if (jQuery('#cc-notification').is(':visible')) {
                jQuery('#dialog').css({display: "none"});

            } else {

            jQuery('#boxes').css({display: "block"});

            //imposta altezza e larghezza maschera
            jQuery('#mask').css({'width':maskWidth,'height':maskHeight});

            //transizione
            jQuery('#mask').fadeIn(500);    
            jQuery('#mask').fadeTo("slow",0.9); 

            //altezza - larghezza
            var winH = jQuery(window).height();
            var winW = jQuery(window).width();

            //vedi al centro
            jQuery(id).css('top',  winH/2-jQuery(id).height()/2);
            jQuery(id).css('left', winW/2-jQuery(id).width()/2);

            //transition
            jQuery(id).fadeIn(2000);    

            //al click su close
            jQuery('.window .close').click(function (e) {
            //Cancel the link behavior
            e.preventDefault();
            jQuery('#mask').hide();
            jQuery('.window').hide();
            });

            //al click sulla maschera
            jQuery('#mask').click(function () {
            jQuery(this).hide();
            jQuery('.window').hide();
            });
            };  

        //});

});

HTML

    <div id="boxes">
        <div id="dialog" class="window">

                <iframe width="700" height="400" 
                src="http://www.youtube.com/embed/sTujqJHITDs?autoplay=1">
                </iframe>

          <div id="popupfoot"> <a href="#" class="close agree">Close</a></div>
        </div>
        <div id="mask"></div>
    </div>

CSS

#mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9000;
  background-color: #000;
  display: none;
}

#boxes .window {
  position: absolute;
  left: 0;
  top: 0;
  width: 600px;
  height: 400px;
  display: none;
  z-index: 9999;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

#boxes #dialog {
  width: 750px;
  height: 420px;
  padding: 10px;
  background-color: #ffffff;
  font-family: 'Helvetica', sans-serif;
  font-size: 15pt;
}

#popupfoot {
  font-size: 16pt;
  position: absolute;
  bottom: 0px;
  width: 250px;
  left: 250px;
}

接受cookie后显示模态

0 个答案: