After using z-index then why showing background object in html
Question
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
2 answers
solution1
1 ACCPTED 2016-06-30 10:30:42
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;
solution2
0 2016-06-30 10:22:46
<div id="wrapper">This is wrapper</div>
This div is in background and Pop up means top of your html body layer your popup div will come and you have fixed the height to 800px, that should be 100%
and also you are using jquery append ,it will append your html at the end body conntent
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.