User97798 User97798 - 5 months ago 7
CSS Question

After using z-index then why showing background object in html

I am making a popup to show some preload stuff but when but is not working. it is showing other 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>




That popup is created dynamicly by using jquery.

I made change in id="wrapper".

Is there any thisg wrong in my css. I fixed position of popup.
this is screenshot here enter image description here

Answer

You have done a mistake in the jQuery like There is you have give the margin so remove it or just make it 0 and other thing @Vinayak is right make height =100%

So
Make Changes in this line

height: 800px; margin: 50px auto 0px auto;

To

height: 100%; margin: 0;
Comments