I'm trying to create a modal popup using the Ajaxtoolkit's modalpopupextender, which works like a charm.
while the popup is showing i want to gray out the page, and did that by assigning the popuppanel teh modalPopup css class:
<style type="text/css">
.modalPopup {
background-color: gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
.modalDiv {
background-color:white;
height:200px;
width:400px;
margin-left:auto;
margin-right:auto;
margin-top:200px;
}
</style>
the backgroudn is grayed out, but now i can't make the controls inside my popup solid again. I tried putting them in a div, and assigning the div another css class where I set the opacity to 0 and 100, but this makes no difference.
my popup panel is this:
<asp:Panel ID="ModalPanel" runat="server" Width="100%" Height="100%" CssClass="modalPopup">
<div class="modalDiv">
writesomething:
<asp:TextBox runat="server" ID="txtModalBox" /><br />
<asp:Button Text="Ok" ID="btnModalOK" OnClick="btnModalOK_Click" runat="server" />
<asp:Button Text="Annuller" ID="btnModalAnnuller" OnClick="btnModalAnnuller_Click" runat="server" /><br />
</div>
</asp:Panel>
So my question is, how do i have a not transparant div inside a panel with a transparant background ?
You can't have a child thats more opaque than its parent when using opacity you should instead use the alpha transparency value in rgba(0,0,0,0) so that the transparency isn't "inherited"
The only downside is that rgba() isn't supported below IE 9
I'll offer an alternative if you want to use rgba with IE versions earlier than 9, but, personally, I don't like to overuse this.
http://css3pie.com/documentation/supported-css3-features/
The link above will take you to the CSS3 PIE project. The instructions for its use in your site are pretty straight forward, but in short, it allows non-CSS3 compatible browsers to render certain CSS3 features (rgba being one of those features, not to mention border-radius, which is another nice one).
In my experience: It does take a fraction of a second (most of the time) to render the features once the user has pulled up the page, but for me, this hasn't really been a problem when I've used it because it just ends up looking like their browser was simply still loading the page, since the user is used to using an older browser anyway.
Hope this helps someone who finds themselves in need of rgba but must remain fully compatible with IE8 (or others), as I know that is exactly what happened to me, and, to my knowledge, this was the only available solution.
Related
My background image is reloading on every postback. So it causes a flickering everytime you press a button. It occurs in Internet Explorer (Version 11.0.9600.17843 tested) and Chrome (Version 45.0.2454.93 m tested). In Firefox (Version 34.0.5 tested) it works. I have tested no other browsers so far. This is the code for the background image so far:
<style type="text/css">
body
{
background-image: url(/Img/Besuchermanagement_1920_1080.jpg);
background-attachment: inherit;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
min-height: 925px;
opacity: 0.9
}
</style>
I also added those meta tags when I read about an IE flickering bug:
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.2)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.2)" />
But that didn't work for me.
So I added an image and set it invisible through this css
.backgroundImageFix
{
width: 1%;
height: 1%;
opacity: 0.0
}
<asp:Image ID="Image1" runat="server" EnableTheming="True" ImageAlign="Bottom" CssClass="backgroundImageFix"
ImageUrl="~/Img/Besuchermanagement_1920_1080.jpg" />
And now I don't have any flickering issues any more.
But I don't understand why adding an image prevents the background image to reload on a postback. I hope anyone can explain it to me and maybe give me a better solution.
during post back the page reloads because it has a life cycle this makes the page to reload which is the flickering
but to avoid that you can use update panel control in asp.net
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel id="UpdatePanel1" runat="server">
<ContentTemplate>
//your code here
</ContentTemplate>
</asp:UpdatePanel>
this should stop you background image to flicker
You have a couple of options
You should use an update panel - it will only "postback" the required data inside the panel and redraw part of the screen inside the update pannel - take a read of this to see how microsoft ajax can help you. I think you should be using the update panel anyway as it is a better user experience.
Alternatively the issue can also be caused because the background colour of the body is not set. it will then default ot transparent, and the page will be white. you can try setting the background colour to a colour similar to what the image has. I have seen this reduce the flicker on pages in the past.
I use asp .net image button to show a static jpeg file,
How to make image button has pressed effect
This is what I have so far:
<asp:ImageButton ID="Login_Button" runat="server" onclick="Login_Button_Click" ImageUrl="~/Image/Login.jpg" />
How to remove red cross when ImageUrl not set?
.Login
{
height:50px;
width:100px;
margin: 5px;
background: url(Image/Login.jpg) no-repeat 0 0;
}
.Login:hover
{
background: url(Image/Login_Pressed.jpg) no-repeat 0 0;
}
This might help with rollovers.
Or, this one would work if you only want it to change when you press the button, instead of when you mouseover it.
I'm not totally sure what you're asking...
Only Link button can do this without a invalid icon
<asp:LinkButton ID="Login_Button" runat="server" style="float:left;"
onclick="Login_Button_Click" CssClass="Login" />
To remove the "red x," you could reference a placeholder transparent gif. They're usually named something like "spacer.gif" or "pixel.gif" and they're just a single transparent pixel. They provide the valid reference when an image file is required but are very small and, of course, transparent. What you're seeing with the "red x" is the image button not being able to find the image file. When no file is referenced or when it can't be found, some browsers (IE) will show the red x.
<asp:ImageButton ID="Login_Button" runat="server" onclick="Login_Button_Click"
ImageUrl="~/Image/pixel.gif" />
Or, as you've answered your own question, you can switch to a LinkButton and go from there.
CSS is definitely the way to go if you want the button to react to mouse actions, and the CSS you provided appears to be valid. You might find, however, that some browsers don't interpret the :hover pseudo class unless it's attached to an anchor (link) tag. If you've had trouble getting the mouse actions to work correctly in some browsers when you use the ImageButton, this is probably why.
I have a datapager with next and previous buttons as so:
<asp:DataPager ID="dpFeaturedPager" PagedControlID="lvFeaturedTips" QueryStringField="ftpg" PageSize="1" runat="server">
<Fields>
<asp:nextpreviouspagerfield ButtonCssClass="featured-previous" PreviousPageText="Previous" ShowNextPageButton="false" />
<asp:nextpreviouspagerfield ButtonCssClass="featured-next" NextPageText="Next" ShowPreviousPageButton="false" />
</Fields>
</asp:DataPager>
When there is only one page available, the Next and Previous links are rendered as so:
<a disabled="disabled">Previous</a>
I have not seen this disabled tag before, and presume it's coming from the datapager control which I won't be able to control.
As usual, this is fine on FireFox but on IE7 the Previous and Next text does not render correctly - it is outlined (what I would expect disabled to look like to be honest - but looks a bit ugly in the page!)
Can I control this in CSS, or is this a known issue?
Thanks
Duncan
Check out this thread on StackOverflow, they have some suggestions on CSS styling for disabled links and controls. Hope it helps!
a[disabled=disabled] {
color: red;
font-weight: bold;
border: 0px;
}
Edit: Doesn't look like the selector attribute will work in IE6.
You cannot set color of disabled control in IE. You can change background or border, but the color will always stay gray with white shadow (system color). It does not work even in IE9.
Thread about this issue: How to change color of disabled html controls in IE8 using css.
Quick solution using jQuery removeAttr():
$('a').removeAttr('disabled');
This:
<a disabled="disabled">Sad</a>
Becomes This:
<a>Happy</a>
I added a class of 'btnDisable' to both the next and previous links then used CSS...
span .btnDisable {cursor: not-allowed; }
span a.btnDisable {cursor: pointer; }
Just make sure you set RenderDisabledButtonsAsLabels to True.
For those that still look for this issue, from .net 4.0 you have the possibility to define in the web.config file the HTML compatibility for .net controls.
<pages controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID">
Then in the Global.asax.cs you can specify the CSS class .net should apply to disabled controls.
System.Web.UI.WebControls.WebControl.DisabledCssClass = "disabled";
I want to add an image, instead of the default button.
I already have a CSS class for the image, will this work?
<asp:Button ID="..." CssClass=""/>
I am trying it now, and the image is all scrunched up. Maybe it's a CSS issue?
Why not use an ImageButton control?
Although you can "replace" a button with an image using the following CSS...
.className {
background: url(http://sstatic.net/so/img/logo.png) no-repeat 0 0;
border: 0;
height: 61px;
width: 250px
}
...the best thing to do here is use an ImageButton control because it will allow you to use alternate text (for accessibility).
I actually prefer to use the html button form element and make it runat=server. The button element can hold other elements inside it. You can even add formatting inside it with span's or strong's. Here is an example:
<button id="BtnSave" runat="server"><img src="Images/save.png" />Save</button>
I dont know if I quite get what the issue is. You can add an image into the ASP button but it depends how its set up as to whether it fits in properly. putting in a background images to asp buttons regularly gives you a dodgy shaped button or a background image with a text overlay because its missing an image tag. such as the image with "SUBMIT QUERY" over the top of it.
As an easy way of doing it I use a "blankspace.gif" file across my website. its a 1x1 pixel blank gif file and I resize it to replace an image on the website.
as I dont use CSS to replace an image I use CSS Sprites to reduce queries. My website was originally 150kb for the homepage and had about 140-150 requests to load the home page. By creating a sprite I killed off the requests compressed the image size to a fraction of the size and it works perfect and any of the areas you need an image file to size it up properly just use the same blankspace.gif image.
<asp:ImageButton class="signup" ID="btn_newsletter" ImageUrl="~/xx/xx/blankspace.gif" Width="87px" Height="28px" runat="server" /
If you see the above the class loads the background image in the css but this leaves the button with the "submit Query" text over it as it needs an image so replacing it with a preloaded image means you got rid of the request and still have the image in the css.
Done.
Assuming a Css class of "image" :
input.image {
background: url(/i/bg.png) no-repeat top left;
width: /* img-width */;
height: /* img-height */
}
If you don't know what the image width and height are, you can set this dynamically with javascript.
.my_btn{
font-family:Arial;
font-size:10pt;
font-weight:normal;
height:30px;
line-height:30px;
width:98px;
border:0px;
background-image:url('../Images/menu_image.png');
cursor:pointer;
}
<asp:Button ID="clickme" runat="server" Text="Click" CssClass="my_btn" />
You can add image to asp.net button. you dont need to use only image button or link button. When displaying button on browser, it is converting to html button as default. So you can use its "Style" properties for adding image. My example is below. I hope it works for you.
Style="background-image:url('Image/1.png');"
You can change image location with using
background-repeat
properties. So you can write a button like below:
<asp:Button ID="btnLogin" runat="server" Text="Login" Style="background-image:url('Image/1.png'); background-repeat:no-repeat"/>
I have a ModalPopupExtender from the AjaxControlToolkit that is working properly in Firefox, Chrome and IE8, but when I run it in IE8 Compatibility mode, it pops up behind the content of my page, rather than on top.
The popup is in a user control that's rendered by the Masterpage. What I think is happening is it's popping up in front of the master page content, as the Masterpage content (my header and sidebars) is greyed out, but the content placeholders are rendering in front of my popup. I found a solution online that suggested changing your doctype declaration in the master page to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
But I already had that exact declaration and still have the positioning problem. Here is the popup code:
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="lnkbtnDealerID"
PopupControlID="pnlPopup"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="OkButton"
CancelControlID="CancelButton"
OnOkScript=""
>
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none" Width="233px">
<p>Are you sure? Your current shopping cart is valid only for the current Dealer ID. Switching Dealer IDs will reset your cart according to the new Dealer ID chosen.</p>
<br />
<div align="center">
<asp:Button ID="OkButton" runat="server" Text="Ok" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</div>
</asp:Panel>
And the relevant CSS:
.popupControl {
background-color: white;
position:absolute;
visibility:hidden;
border-style:solid;
border-color: Black;
border-width: 2px;
}
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.modalPopup {
background-color:white;
border-width:1px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
I just found your posting whilst trying so solve the same problem. For me I tracked it down to a div tag, called mainBody, which all page content is contained within. The CSS class that controls this div has relative positioning but no z-index. As soon as I set the z-index to -1 for mainBody my modalPopup worked perfectly in IE7.
Hope this helps?!
You can only set the Z-index in IE for the parent div you are in.
A div higher up will always render on top of your lower div.
I solved the problem by Always put the Modualwindow Div directly after the tag.
If it's the first div it's always on top.
Henrik
I'd like to add that Z-index is indeed the issue for those running into this in IE 10 compat view, which defaults to IE7 doc mode on a local network.
I used z-index: -1 for the html and body, and then had to go to a z-index: 100 for the other containers. The pop-up classes are at a z-index: 999999; You'll need to adjust for your site.
This might be a solution you can use:
Problem in Z-index of menu and ajax ModalPopupExtender in ASP.net
I have been running into this issue too... but on a prerelease product that we weren't really going to support for IE6/7. But, I just tried it out. Make sure that all of the divs that hold your controls in the modal popup have a really high z-index (like 10001).
If you use the ModalPopupExtender (AjaxToolkit 4.1.50927.0 and .Net 4.0.30319) in an ASP.NET project, you may face the same problem with IE7 and IE8. The Popup window will be completely rendered in IE 9 but not in IE7 & IE8. In that case, try removing the AnimationExtender (fade in) for that ModalPopupExtender it works fine. Check the browser version and render the code for the animation via JS for newer browsers that can handle the fade in effect or do not use the animation if the browser is, say, IE7.