WordPress的自定义弹出菜单

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);