在wordpress中顯示彈出窗口

Question

我想在點擊鏈接時添加彈出窗口，此窗口將包含wordpress中的簡報窗體。

對於這一點，我在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(); 
    } 
});