jquery - Speakkerへのポップアップを作成するにはどうすればよいですか？

Question

私は自分のサイトにProjekktorSpeakkerを実装しました。音楽を再生するかどうかを尋ねるポップアップを作成したいと思います。

どうすればこれを達成できますか？

ありがとう！

---

編集：

私が知りたかったのは、ポップアップを作成する方法ではなく、ポップアップにSpeakkerをリコールする方法です！..はっきりしなかった場合は申し訳ありません！これについては別の質問を開きます。

Answer 1

デモを見る

基本的には 2divつ作成し、1 つがdiv背景全体をカバーします。2 番目は、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>