IE10- transparent overlay using z-index - javascript

I am working on beautification of javascript alert.I need a transparent overlay which overlay the whole page other than the alert block,just like the origin javascript alert.
The html:
<html>
<body>
<div class="alert-overlay">
<div class="alert-block"></div>
</div>
</body>
</html>
The css of the overlay:
.alert-overlay {
width: 100%;
height: 100%;
position: fixed;
z-index: 1100;
left:0;
top:0;
}
The css of the alert block:
.alert-block{
position:absolute;
top:30%;
left:50%;
width: 300px;
background-color: #fff;
margin-left: -150px;
border-radius: 5px;
z-index:1200;
}
It works in IE11,chrome and firefox,but failed in IE10-.
The overlay seems overlay nothing in IE10-,all the elements on the page are active.Strangely,if I add a background-color:black,it will overlay everything but the alert-block,and make the page inactive like the origin javascript alert except the additional background,which is not what I want.
So how can I make the transparent overlay work on IE10-?Is that a z-index bug?

IE10 has some issues. Try giving a background with filter. Here is how you can do it-
background:white; filter:alpha(opacity=1);
Some helpful links :
z-index problem in IE with transparent div
IE z-index trouble on element with transparent background
Hope it helps.

IE10 and less allow actions through elements when it's not having any backgorund or content. You must add a background to your overlay. Use a transparent one if you don't want it to be visible:
background-color: rgba(0,0,0,0);

Related

Unable to get image to properly Overlay

I have an image that only appears when icon located within a pagegridview is selected. What should happen is that the overlay shows, with the full sized image on top of it. What really happens is that the overlay overlays my full sized image and off centers it. My code stands as followed:
CSS
#overlay{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity = 70) !important;
display: none;
z-index: 100;
}
.fullView{
position: absolute;
}
Javascript
Works fine to display, can't test the hiding due to overlay being on top.
$('.preview').click(function(){
$("#<%=imgFull.ClientID%>").attr("src", $(this).attr('fullImg'));
$("#overlay").show();
$("#overlayContent").show();
});
$("#<%=imgFull.ClientID%>").click(function(){
$("#<%=imgFull.ClientID%>").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
Overlay/Full Image Divs
Located right below an ASP Panel and a PageGridView
<!-- Divs for displaying the full sized image. Initially hidden. Hides again when clicked -->
<div id="overlay"></div>
<div id="overlayContent" >
<asp:Image runat="server" ID="imgFull" Width="400" ImageUrl="" CssClass="fullView"/>
</div>
I could have sworn for the most part position:absolute css would solve the main portion, but the time crunch is on and I'm trying to do this with the flu. Any help is appreciated.
The answer was staring me in the face and I just didn't quite realize it. The #overlay# CSS was fine, however, I needed to additionally change the.fullViewtofixed` as well. Once this was done, the image hovered perfectly on top of the overlay, and I was able to utilize some CSS changes in the javascript to accurately center the image.

Android jQuery fadeIn weird behavior

I'm developing a phonegap app for iphone and android.
I have a black overlay with a loading message that appears when the user clicks on a button.
Everything is fine on ios, but on android, the fadeIn() function only displays parts of the overlay. Like, really, parts. Sometimes just the bottom, sometimes the bottom and the top right corner... Really weird.
Although if I use .show() instead, everything goes right.
Have you ever seen something like this ? (terrible quality but you can see the overlay on the bottom half, and a semi-transparent piece of overlay on the top right corner.)
What's wrong with the .fadeIn() function on android ?
(Here is the css if you need it)
.black-overlay {
position: absolute;
width: 100%;
height: 120%;
background-color: #000;
color: #FFF;
display: none;
z-index: 99999;
top:0;
}
And the beginning of the HTML code :
<body class="side">
<div class="black-overlay row-fluid"> //overlay
<div class="span12 loading-splash">
<div class="span12"><span>Chargement...</span></div>
<div class="span12 span-no-margin"><img src="img/ajax-loader_black.gif" alt=""></div>
</div>
</div>
<div class="app container-fluid event-creation"> //Rest of the app...
Here's some CSS that I use for background overlays.
.ajax-loader-background
{
background-color: rgba(0,0,0,0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000);
zoom: 1; /* Force hasLayout in IE. */
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 99999;
}
I'm not sure why you get a different result with .fadeIn, except that jQuery might need to know the width/height of the element, and if it's not visible it has zero width/height.
I've noticed slight differences between width: 100% and left: 0px; right: 0px. Same with height: 100%. You're also setting the height to 120% which I've never seen done with absolute positioning. You should not have to do that for an overlay.

Visibility of stacked HTML popups

I'm developing a jQuery Backbone.js web app.
I have a table with table entries. The table has a white background.
If the user selects a table entry, a modal popup is shown. To show the user that the popup is now in modal mode, I used to have the jQuery UI diagonal stripes (ui-widget-overlay).
But I changed to an alternative. Those stripes were too "striking", "obtrusive" for me. I now change the opacity of the table to 0.5. I like this more.
The problem now is that I have popups in the popup window. And if I also change the opacity of the first popup to show the user that only the second popup is working now, the table shines through the first popup.
Is there any possibility, any alternative way to have a popup window (a div) "dim", "grey out" to half of its appearance without getting transparent?
I would add another div on top of the div that has the same dimensions but has grey background color with opacity 0.75. This should work pretty fine.
CSS
.inner {
position: absolute;
}
.fade {
background: grey;
opacity: 0.75;
}
HTML
<div class="outer">
<div class="inner">content</div>
<div class="inner fade"></div>
</div>​
This way you are pretty safe when it comes to cross-browser references. Also you can control the fade by adding an "id" attribute to the fade class and make it go away. This way, you can also make div inactive, as they div inner fade is on top of it.
Try with hsla (look here).
<style>
#el1 {
background: red;
width: 700px;
height: 700px;
}
#el2 {
background-color: hsla(190, 30%, 94%, 0.6);
width: 500px;
height: 500px;
}
#el3 {
background: green;
width: 300px;
height: 300px;
}
</style>
<div id="el1">
<div id="el2">
<div id="el3">
</div>
</div>
</div>
In my code, el1 is the holder and not transparent at all. Then, el2 as first child uses hsla for transparency. The contained el3 is not transparent again and this works.
You could lay a glass pane on top of your page and set the z-index appropriately so that your 2nd popup lies on top of it and everything else is hidden under it:
#pane {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
opacity:0.5;
z-index: 999;
}
Assure that your 2nd popup has a z-index higher than the pane and you're fine.

jquery or javascript active element on foreground, lock background?

I have a layer that is presented by a logic var.
that layer is just a hidden div - how do I make it so the layer is the only element that can be interacted with on the page when it is visible?
thanks!
Update:
used a full size div in the background with a transparent gif - works in firefox, but not IE - thoughts?
#overlay {
background-image: url('../images/transparent.gif');
width:100%;
height:100%;
z-index:8999;
display:none;
margin-top: 0;
margin-left:0;
position:fixed;
}
The basic approach is to put a semi-transparent element over your whole page, but under your modal window that contains your focus element. JQuery doesn't have this built in, so you can either create your own using that approach or use a JQuery plugin.
UPDATE:
Here's a fiddle based on the comment discussion. I've tested this and it works in IE8, Firefox 3.5.15, and Chrome 12.0.742.112.
HTML:
<div class="overlay"></div>
<div>test</div>
<input/>
<div class="modalWindow ">
foo:
<input/>
</div>
CSS:
.overlay {
opacity:.1;
filter:alpha(opacity=10);
background-color: black;
width:100%;
height:100%;
z-index:8999;
margin-top: 0;
margin-left:0;
position:fixed;
}
.modalWindow {
z-index:9000;
position: fixed;
background-color: white;
top: 20px;
left: 20px;
width: 200px;
height: 100px;
}
It sounds like you are creating a modal dialog. You can use jQueryUI to handle this:
http://jqueryui.com/demos/dialog/#modal-confirmation
Sounds like you're looking for a modal
You can use a jQuery UI Modal
BlockUI jQuery plugin is an alternative to using jQuery UI modals. This is a neat demo that shows how you can disable a specific background element in a slightly different fashion: http://jquery.malsup.com/block/#element
To answer your question update:
You could make your gif transparent with CSS2.1 and CSS3 because there are problems with transparent gifs/pngs in some browsers:
#overlay {
background-image: url('../images/transparent.gif');
width:100%;
height:100%;
z-index:8999;
display:none;
margin-top: 0;
margin-left:0;
position:fixed;
/* for IE, the filter only works reliably on positioned elements */
filter: alpha(opacity=40); -moz-opacity: 40%; opacity: 0.4;
}

Transparent PNG Reacting to Sites Image Sliders and Content

I just stumbled across this guys site: http://mantia.me/
He has an awesome logo that reacts to the content the site is currently showing, if you wait on his homepage the logo changes with the slide show of images. I was wondering if anyone knows how to replicate the effect. I'm guessing it's a transparent png with a rotating master background then the site is layered on top, but I'm probably wrong.
Any guesses on how to make something similiar?
Images:
It's really simple what he has. Like you mention it's a transparent PNG that matches the given background ( in this case white ) and places it on top of it with z-index. The rest is just jQuery with fadeIn and fadeOut images.
You can view the png on top of the image transitions.
So basically you just need a div with position:relative set the width the height of it; then add another div inside it which has the jQuery Slideshow (check this out: http://medienfreunde.com/lab/innerfade/), set it a z-index:0 Then add another div (which will go on top of the slider) and add it a background with z-index to something higher than 0 and you're good to go.
Here is how he does it:
HTML
<div id="content">
<div id="feature"></div>
<div id="navigation"></div>
</div>
CSS
#content {
position: relative;
width: 800px;
margin: 64px auto;
font: normal 13px/16px "myriad-pro-1","myriad-pro-2", sans-serif;
color: #404040;
}
#navigation{
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 800px;
height: 46px;
background: transparent
url(http://mantia.me/wp- content/themes/minimalouie/img/nav.png)
no-repeat top left;
}
#feature {
width: 800px;
height: 466px;
overflow: hidden;
background-color: aqua;
}
And then he just adds an img element to #feature.
<div id="feature">
<img src="http://mantia.me/images/supermariobros_large.jpg"
alt="Super Mario Bros.">
</div>
See fiddle.

Categories

Resources