如何爲Speakker創建一個彈出窗口？

Question

我在我的網站中實施了Projekktor Speakker。我想創建一個彈出窗口，詢問您是否想播放音樂。

我該如何做到這一點？

謝謝！

---

編輯：

我想知道的是如何回憶Speakker我不彈出如何創建一個彈出..對不起，如果我不清楚！ 我會爲此打開一個單獨的問題。

Answer 1

See demo

基本上創建兩個div一個是div，將覆蓋整個背景。 其次是div這是您的實際彈出窗口。

HTML：

<div id="mask"></div> 
<div id="popup"><h2>Do you want to play music?</h2></div>​ 

CSS：

#mask 
{ 
height:100%; 
width:100%; 
position:absolute; 
top:0; 
left:0; 
background-color:#DDD; 
z-index:100; 

} 
#popup 
{ 
height:200px; 
width:300px; 
-webkit-border-radius:10px; 
border:5px solid #FFAd08; 
background-color:#FFD69C; 
z-index:101; 
position:absolute; 
left:50px; 
top:100px; 
} 

注：我已經使用風格只是爲了展示，你應該樣式彈出按您的需求，並在同一位置時方式

希望它有幫助。

Answer 2

試試這個：流行會在頁面加載開放

CSS

.mover { 
    width: 250px; 
    height: 150px; 
    background:#000; 
    position:absolute; 
    border:1px solid #f5f5f5; 
    display:none; 
    z-index:1001;} 

腳本

var myscreen=screen.width; 
    var popPos = (myscreen - 250) /2; //250 is the width of popup 
    $(function() { 
    $(window).load(function() { 
     $('#special').show(); 
     $("#special").css({ 
      marginLeft: popPos+"px", 
     }); 
    }); 
    }); 

HTML

<div class="mover" id="special"></div>