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