Wordpress custom Popup

Question

I m using a custom pupup in my wordpress website but while testing on localserver the popup works fine with a simple index.html but when i embed it on the similar local server in wordpress header.php, style.css it doesnt work below is my code with placement file

in my /wordpress/wp-content/themes/parasponsive/header.php

i place my below jquery code in the head section

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

});

and then in similar header .php just above my header closing tag i placed the html

    </section>

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

and then in style /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;
}

but its not even getting clicked whats the issue

Answer 1

Try this :

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