jquery - Wordpress 自定义弹出窗口

Question

我在我的 wordpress 网站上使用自定义 pupup，但是在本地服务器上测试时，弹出窗口使用简单的 index.html 可以正常工作，但是当我将它嵌入 wordpress header.php 和 style.css 中的类似本地服务器时，它不起作用下面是我的代码和放置文件

在我的/wordpress/wp-content/themes/parasponsive/header.php 中

我将下面的 jquery 代码放在 head 部分

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