CSS：テキストポップアップが表示されない

Question

私はこのblogのようにポップアップメッセージを表示しようとしています。私はhereと同じように指示に従った。私は自分のブログに応募してもうまくいきません。 pleseは私がどのポップアップを取得していない午前スクリプト

// Place all Javascript code here 
 
$(document).ready(function() { 
 
    $("#showPopup").click(function() { 
 
    $("div#Popup").addClass("show"); 
 
    return false; 
 
    }); 
 
    $("#closePopup").click(function() { 
 
    $("div#Popup").removeClass("show"); 
 
    return false; 
 
    }); 
 
    $(".trigger").click(function() { 
 
    $(".panel").toggle("fast"); 
 
    $(this).toggleClass("active"); 
 
    return false; 
 
    }); 
 
});

Popup { 
 
    position: absolute; 
 
    top: 40px; 
 
    width: 560px; 
 
    left: 170px; 
 
    border: solid 1px #bbb; 
 
    padding: 20px; 
 
    background: #fff; 
 
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25); 
 
    opacity: 0.0; 
 
    -webkit-transition: opacity 0.0s ease-out; 
 
    z-index: 0; 
 
} 
 

 
div#Popup.show { 
 
    opacity: 1.0; 
 
    z-index: 100; 
 
    -webkit-transition-duration: 0.25s; 
 
} 
 

 
pre { 
 
    background: rgba(0, 0, 0, .75); 
 
    margin: 0 0 18px; 
 
    padding: 13px 18px 14px; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    text-shadow: 0 1px 1px #fff; 
 
    font-size: 11px; 
 
    line-height: 16px; 
 
    font: 12px/18px "Monaco", "Courier New", "Courier", monospace; 
 
    color: #fff; 
 
} 
 

 
code { 
 
    color: #fff; 
 
    background: rgba(0, 0, 0, .75); 
 
    margin-bottom: 18px; 
 
    border: solid rgba(0, 0, 0, .75); 
 
    border-width: 1px 1px 0; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, .5); 
 
    font: 12px/18px "Monaco", "Courier New", "Courier", monospace; 
 
} 
 

 
.button { 
 
    border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, .5); 
 
    color: #FFFFFF !important; 
 
    background: #33AD33; 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    line-height: 1; 
 
    text-decoration: none; 
 
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25); 
 
    padding: 1px 4px 1px 4px; 
 
} 
 

 
.button:hover { 
 
    background: #327F32; 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="" id="showPopup" class="button">Show me The Message</a>

の下に参照してください。助けてください。

Answer 1

@Peteの指示に従って、ポップアップdivを追加するのを忘れてしまいます。ここで

簡単な修正です：あなたは、ポップアップスタイリングコードを追加しますが、ポップアップのHTMLコード自体を追加するのを忘れ

// Place all Javascript code here 
 
$(document).ready(function() { 
 
    $("#showPopup").click(function() { 
 
    $("div#Popup").addClass("show"); 
 
    return false; 
 
    }); 
 
    $("#closePopup").click(function() { 
 
    $("div#Popup").removeClass("show"); 
 
    return false; 
 
    }); 
 
    $(".trigger").click(function() { 
 
    $(".panel").toggle("fast"); 
 
    $(this).toggleClass("active"); 
 
    return false; 
 
    }); 
 
});

#Popup { 
 
    position: absolute; 
 
    top: 40px; 
 
    width: 560px; 
 
    left: 170px; 
 
    border: solid 1px #bbb; 
 
    padding: 20px; 
 
    background: #fff; 
 
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25); 
 
    opacity: 0.0; 
 
    -webkit-transition: opacity 0.0s ease-out; 
 
    z-index: 0; 
 
} 
 

 
div#Popup.show { 
 
    opacity: 1.0; 
 
    z-index: 100; 
 
    -webkit-transition-duration: 0.25s; 
 
} 
 

 
pre { 
 
    background: rgba(0, 0, 0, .75); 
 
    margin: 0 0 18px; 
 
    padding: 13px 18px 14px; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    text-shadow: 0 1px 1px #fff; 
 
    font-size: 11px; 
 
    line-height: 16px; 
 
    font: 12px/18px "Monaco", "Courier New", "Courier", monospace; 
 
    color: #fff; 
 
} 
 

 
code { 
 
    color: #fff; 
 
    background: rgba(0, 0, 0, .75); 
 
    margin-bottom: 18px; 
 
    border: solid rgba(0, 0, 0, .75); 
 
    border-width: 1px 1px 0; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, .5); 
 
    font: 12px/18px "Monaco", "Courier New", "Courier", monospace; 
 
} 
 

 
.button { 
 
    border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, .5); 
 
    color: #FFFFFF !important; 
 
    background: #33AD33; 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    line-height: 1; 
 
    text-decoration: none; 
 
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25); 
 
    padding: 1px 4px 1px 4px; 
 
} 
 

 
.button:hover { 
 
    background: #327F32; 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="" id="showPopup" class="button">Show me The Message</a> 
 

 
<div id="Popup"> 
 

 

 

 

 
dsadsadsadsdsdsacsacas 
 
<a href="" id="closePopup">close ME</a> 
 
</div>

Answer 2

：

<div id="Popup">Hello there</div> 

Here is the JSFiddle demo

また、コードごとにpopup要素のIDはPopupである必要があります。 CSSコードがPopupから#Popupに変更されました。また、クリック時にポップアップを閉じるコードを追加して、追加されたコードを区別できるようにコメントを追加しました。