Wordpress custom Popup

Question

Я использую собственный кукольный сайт на моем сайте WordPress, но при тестировании на localserver всплывающее окно отлично работает с простым index.html, но когда я вставляю его на похожий локальный сервер в wordpress header.php, style.css он не работает под мой код с размещения файла

в моем /wordpress/wp-content/themes/parasponsive/header.php

я кладу ниже JQuery кода в головной секции

<script> 
$(document).ready(function(){ 

    $(function(){ 
     $('span.clickMe').click(function(e){ 
      var hiddenSection = $('section.hidden'); 
      hiddenSection.fadeIn() 
       // unhide section.hidden 
       .css({ 'display':'block' }) 
       // set to full screen 
       .css({ width: $(window).width() + 'px', height: $(window).height() + 'px' }) 
       .css({ top:($(window).height() - hiddenSection.height())/2 + 'px', 
        left:($(window).width() - hiddenSection.width())/2 + 'px' }) 
       // greyed out background 
       .css({ 'background-color': 'rgba(0,0,0,0.5)' }) 
       .appendTo('body'); 
       // console.log($(window).width() + ' - ' + $(window).height()); 
       $('span.close').click(function(){ $(hiddenSection).fadeOut(); }); 
     }); 
    }); 

}); 

, а затем аналогичный заголовок .php чуть выше моего заголовок закрывающего тега я поместил HTML

</section> 

<section class="hidden"> 
    <article class="popup"> 
     <span class="close">Close Me</span> 
     <p> 
      This is a test. 
     </p> 
    </article> 
</section> 

, а затем в стиле /wordpress/wp-content/themes/parasponsive/style.css

section.center { 
    max-width: 150px; 
    margin: 100px auto; 
} 
span.clickMe { 
    font-size: 30px; 
} 
span.clickMe:hover { 
    cursor: pointer; 
    color: green; 
} 
section.hidden { 
    display: none; 
    position: fixed; 
} 
section article.popup { 
    position: relative; 
    width: 400px; 
    height: 300px; 
    background: #e3e3e3; 
    color: #222; 
    border: 1px solid #333; 
    border-radius: 3px; 
    padding: 5px 7px; 
    margin: 10% auto; 
} 
span.close { 
    text-transform: uppercase; 
    color: #222; 
} 
span.close:hover{ 
    color: red; 
    cursor: pointer; 
} 

, но его даже не получая щелкнул, Что вопрос

Answer 1

Попробуйте это:

(function($) { 
      $('span.clickMe').click(function(e){ 
       var hiddenSection = $('section.hidden'); 
       hiddenSection.fadeIn() 
        // unhide section.hidden 
        .css({ 'display':'block' }) 
        // set to full screen 
        .css({ width: $(window).width() + 'px', height: $(window).height() + 'px' }) 
        .css({ top:($(window).height() - hiddenSection.height())/2 + 'px', 
         left:($(window).width() - hiddenSection.width())/2 + 'px' }) 
        // greyed out background 
        .css({ 'background-color': 'rgba(0,0,0,0.5)' }) 
        .appendTo('body'); 
        // console.log($(window).width() + ' - ' + $(window).height()); 
        $('span.close').click(function(){ $(hiddenSection).fadeOut(); }); 
      }); 
     }) (jQuery);