如何为Speaker设置弹出窗口?

时间:2012-10-25 11:33:44

标签: jquery html5

我已在我的网站中实施Projekktor Speakker。我想创建一个弹出窗口,询问您是否要播放音乐。

我该如何做到这一点?

谢谢!


编辑:

我想知道的是如何将Speakker召回到我的弹出窗口而不是如何创建弹出窗口!对不起,如果我不清楚的话! 我将为此开一个单独的问题。

2 个答案:

答案 0 :(得分:2)

<强> 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;
}

注意:我使用样式只是为了演示你应该根据你的需要设置弹出窗口的样式并以相同的方式定位

希望它有所帮助。

答案 1 :(得分:1)

试试这个:pop将在页面加载时打开

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>