show popup in 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(); 
    } 
});