I'm currently working on a popup to display some preload content, but unfortunately it's not functioning properly. Instead of showing the preload content, it's displaying another element.
<html>
<script src="http://www.flygoldfinch.com/wp-includes/js/jquery.min.js"></script>
<script src="http://www.flygoldfinch.com/wp-includes/js/nprogress.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.flygoldfinch.com/wp-includes/css/nprogress.css">
<script>
jQuery(document).ready(function() {
jQuery('body').append('<div id="pbwrapper" style="width: 100%; position: fixed; left:0; top: 0; opacity:1; height: 800px; margin: 50px auto 0px auto; text-align: center; z-index: 10000; background-color : #fff;" > <h1 class="headline tac sans-serif">Wait while we loading Awesomeness</h1> </div>');
NProgress.start();
setTimeout(
function(){
NProgress.done();
jQuery('#pbwrapper').remove();
}, 9000
);
});
</script>
<body>
<div id="wrapper">This is wrapper</div>
</body>
</html>
The popup is generated dynamically using jQuery.
I made changes to the id "wrapper".
Is there something wrong with my CSS? I set the position of the popup to be fixed.
You can see a screenshot of the issue here.