I have implemented a custom popup on my WordPress website and it works fine when tested on a simple `index.html` file on the local server. However, when I embed the code in the `header.php` and `style.css` files of WordPress on the local server, the popup does not work as expected. Below is the code snippet along with the placement within the files:
In `/wordpress/wp-content/themes/parasponsive/header.php`, I have placed the following jQuery code in the head section:
<script>
$(document).ready(function(){
$(function(){
$('span.clickMe').click(function(e){
var hiddenSection = $('section.hidden');
hiddenSection.fadeIn()
.css({ 'display':'block' })
.css({ width: $(window).width() + 'px', height: $(window).height() + 'px' })
.css({ top:($(window).height() - hiddenSection.height())/2 + 'px',
left:($(window).width() - hiddenSection.width())/2 + 'px' })
.css({ 'background-color': 'rgba(0,0,0,0.5)' })
.appendTo('body');
$('span.close').click(function(){ $(hiddenSection).fadeOut(); });
});
});
});
Next, just above the closing header tag in the same `header.php` file, I added the HTML code:
</section>
<section class="hidden">
<article class="popup">
<span class="close">Close Me</span>
<p>
This is a test.
</p>
</article>
</section>
Finally, in the `/wordpress/wp-content/themes/parasponsive/style.css` file, I included the styles for the elements:
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;
}
However, despite implementing all these changes, the popup is still not clickable. What could be causing this issue?