What is the correct code for css ti change color of popup background when it open.
I am using…
body {
background: #ff0000;
font-family: Arial, sans-serif;
font-size: 120%;
padding: 20px;
}
But it’s not working.
You’ll need to show us the HTML and the CSS for the pop-up. The rule you have there is targeting the <body> element.
<script>$(document).ready(function () {
$("#popup").hide().fadeIn(1000);
//close the POPUP if the button with id="close" is clicked
$("#close").on("click", function (e) {
e.preventDefault();
$("#popup").fadeOut(1000);
});
});
</script>
CSS
<style>
#popup {
background-color:#f5f5f5;
display:none;
position:absolute;
margin:0 auto;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 50px 1px #000;
}
</style>
HTML
<div id="popup">
<img src="../images/close.png" id="close" width="30" align="right"alt="Close"></img>
<img src=".../images/popup.jpg">
</div>
I’m seeing the correct (grey) background colour on the pop-up window. (I had to use a placeholder image, and there is nothing to indicate the size of your intended images, but I tested with various sizes.)
What this means…
I am not getting and solutions…
How you do this means how you changed the bg color of background in red colour .
May I have the CSS
You already have the CSS. That is what I see when I take the code you have posted above and use it to create a page. I haven’t altered anything (except to comment out the display:none so that the pop-up shows).
If you are seeing something different, then you need to post the full code for the whole page, or a link to a working example, so that we can see what is going wrong.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>shivekumar pop-up test</title>
<style>
body {
background: #ff0000;
font-family: Arial, sans-serif;
font-size: 120%;
padding: 20px;
}
#popup {
background-color:#f5f5f5;
/*display:none;*/
position:absolute;
margin:0 auto;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 50px 1px #000;
}
</style>
</head>
<body>
<div id="popup">
<img src="../images/close.png" id="close" width="30" align="right"alt="Close"></img>
<img src="https://placebear.com/400/300">
</div>
<script>$(document).ready(function () {
$("#popup").hide().fadeIn(1000);
//close the POPUP if the button with id="close" is clicked
$("#close").on("click", function (e) {
e.preventDefault();
$("#popup").fadeOut(1000);
});
});
</script>
</body>
</html>
Or have I misunderstood your question?
Do you mean that you want the red page background to change colour when the pop-up opens?
1 Like
@TechnoBear thanks for your help…
But this not I am saying…
Suppose…
Have a bit look this image. There when popup is open light black color shows in background and when we close the popup show normal background color such as white and whatever.
When I use this code…
.popup_overlay {
display: none;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
It is not working…
There is nothing in the code you have posted so far which has a class of popup_overlay. Please post the full code for the page, or a link to a live version. In order to understand why something is not working, we need to see the whole picture. Odd snippets of code in isolation are not enough.
1 Like
If you’re looking for a “lightbox” you don’t need to write your own, there are countless variations available already.
2 Likes
Just to keep this topic up-to-date, the OP sent me a link to the page in question. The issue is apparently that adding the overlay breaks the page layout, so I have suggested he ask in the JS forum. I have advised him to correct the HTML errors first, as there are numerous errors on that page, and one or more of those may be the cause of the broken layout and the JavaScript not working as expected.
2 Likes
Usually the overlay is position:fixed and anchored to the top, right ,left and bottom of the page so that it covers the whole screen like this example.
You don’t seem to have positioned the overlay at all.
Here’s a rough example using some of your code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>shivekumar pop-up test</title>
<style>
html, body {
margin:0;
padding:0;
}
body {
background: #ff0000;
font-family: Arial, sans-serif;
font-size: 120%;
}
.popup_overlay {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 99; /* Sit on top */
left: 0;
right:0;
top: 0;
bottom:0;
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}
#popup {
background-color:#f5f5f5;
display:table;
width:100%;
height:100%;
}
.popup-content {
display:table;
margin:auto;
box-shadow: 0 0 50px 1px #000;
position:relative;
}
.popup-inner {
display:table-cell;
vertical-align:middle;
text-align:center;
}
.popup-inner img{display:block}
#close {
position:absolute;
right:10px;
top:10px;
}
</style>
</head>
<body>
<div class="popup_overlay">
<div id="popup">
<div class="popup-inner">
<div class="popup-content"> <img src="../images/close.png" id="close" width="30" align="right"alt="Close"><img src="https://placebear.com/400/300"> </div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>$(document).ready(function () {
$(".popup_overlay").hide().fadeIn(1000);
//close the POPUP if the button with id="close" is clicked
$("#close").on("click", function (e) {
e.preventDefault();
$(".popup_overlay").fadeOut(1000);
});
});
</script>
</body>
</html>
I used a few extra divs on the modal so that we can get automatic vertical and horizontal centring without magic numbers or guesswork and without the image sliding out of the viewport.
1 Like
Yes, @PaulOB Exactly I this want…
Why I am not able to make background light transparent when using this rgba(255, 0, 0, 0.3); instead of [quote=“PaulOB, post:12, topic:289972”]
background-color:#f5f5f5;
[/quote]
???
You would need this for #f5f5f5.
rgba(245, 245, 245, 0.3)
You can convert from hex to rgba easily using an online tool like this.
Not working…
“Not working” is not very informative. Are you saying that the overlay is displaying in the wrong colour?
As it works in @PaulOB’s example, you’ll need to post your full code if you want help with tracking down the problem.
2 Likes
@TechnoBear you’re saying but I am using @PaulOB code and he is already posted the css in just few previous Respond.
Difficulty is coming from where that not working light or bit transparent color /rgba instead the place of background-color:#f5f5f5;
But it is working, just as TechnoBear has already pointed out.
I see the red <body> background coming through the transparent #popup
Yes, same thing is happening with me but transparent means that background text must see behind the popup or disable click link or delete text when popup is open…That is my mean…
Apparently you have more content on your page than we are aware of.
You will need to post a link to your page, or post complete code showing the problem.
2 Likes