ワードプレスでポップアップを表示

Question

リンクをクリックするとポップアップを追加したいのですが、このポップアップにはワードプレスのニュースレターフォームが含まれています。そのために

、私は私のhtmlページにこのコードを作成します。

<script type="text/javascript"> 
 
alert('OK!'); 
 
$(document).ready(function(e){ 
 
\t 
 
\t $("#ouvrir_f").click(function(e){ 
 
\t \t 
 
\t \t $(".arr_plan, .f_modale").css("display", "block"); 
 
\t \t $(".arr_plan").animate({'opacity':'0.5'},350); 
 
\t \t $(".f_modale").animate({'opacity':'1'},350); 
 
\t }); 
 
\t 
 
\t 
 
\t 
 
}); 
 
</script>

.arr_plan{background: grey;cursor: pointer;display: none;height: 100%;left: 0px; position: absolute; top: 0px; width:100%; } 
 
.f_modale{background: #ffffff; border: #000 solid 1px; border-radius: 5px; box-shadow:0px 0px 5px #444444; display: none; height: 220px; left: 30%; padding: 10px;position: absolute; top: 25px; width: 500px;} 
 
.fermer{cursor: pointer; display: block; font-size; 12px; font-weight: bold; text-align: right;} 
 
.fermer:hover{text-decoration: underline;}

<a href="#" id="ouvrir_f" class="ouvrir_f">Ouvrir</a> 
 
\t <div class="arr_plan" ></div> 
 
\t \t <div class="f_modale"> 
 
\t \t \t <span class="fermer">fermer</span> 
 
\t \t \t <h3>Titre fenetre modale</h3> 
 
\t \t \t \t <p>Bla bla bla bla .....</p> 
 
\t \t </div>

が、私は、リンクをクリックしたときに、それがポップアップ表示されません。

ありがとうございました。

Answer 1

ここに行く - 作業例を特別にあなたのため：

http://codepen.io/Nikolaus91/pen/VaMOvJ

は本当にあなたのソリューションをチェックしていなかった、それが動作するチャンスがありません知っています。 添付されたモーダルは非常に簡単です。 Formstone.itまたはFoundation 6のモーダルを使用することをお勧めします。

$(".show").on("click", function() { 
    $(".mask").addClass("active"); 
}); 


function closeModal() { 
    $(".mask").removeClass("active"); 
} 

$(".close, .mask").on("click", function() { 
    closeModal(); 
}); 

$(document).keyup(function (e) { 
    if (e.keyCode == 27) { 
     closeModal(); 
    } 
});