I am using a asp.net ajax modal pop extender to show the modal overlay. it is working as expected, the problem i am facing is it is setting the background to black in IE 8 rather than the transparent one. it works fine FF and Chrome.
Markup.
<cc1:ModalPopupExtender ID="mpError" runat="server" PopupControlID="pnlError" TargetControlID="btn"
CancelControlID="ancClose" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlError" runat="server" CssClass="modalPopup" align="center" Style="display: none">
<div class="dvPopup">
<a id="ancClose" style="float: left; cursor: pointer; margin: 10px 0 0 10px;">
<img alt="Close" src="Images/x_button.png" /></a>
<br />
<br />
<span class="spanPop">You can only vote once!</span>
</div>
</asp:Panel>
Css classes.
.modalBackground
{
background-color: #d2d2d2;
filter: alpha(opacity=60%);
opacity: 0.8;
}
.modalPopup
{
padding-top: 10px;
padding-left: 10px;
width: 486px;
height: 215px;
}
.dvPopup
{
background-image: url('images/error2_window.png');
width: 486px;
height: 215px;
}
There is some problem with opacity in IE8 , but don't the work arounds. Any suggestions, Css hacks will work .
Resolve this by changing in modal background class.
filter: alpha(opacity=50);
opacity: 0.5;
Related
I am using the following code to generate a popup box
<cc1:modalpopupextender ID="ErrorMessage" runat="server" TargetControlID="cmdHospitalNew"
PopupControlID="popupError" PopupDragHandleControlID="PopupHeader" Drag="true"
OkControlID="SubmitOk" BackgroundCssClass="ModalPopupBG">
</cc1:modalpopupextender>
<div class="popupConfirmation" id="popupError" style="display: none; background-color: White;
width: 200px; height: auto;">
<div id="popupErrorMessage" style="width: 190px">
<asp:Label ID="lbl_DB_popupError" runat="server" Text="Please fill all required fields!"></asp:Label></div>
<div id="popupErrorSubmitOk">
<input type="submit" id="SubmitOk" value="OK" style="visibility: visible;" /></div>
Is there a way to move this to the middle-Top-Left? Right now the popup is in the center of the screen. Here is the stylesheet I am using:
body {
}
.ModalPopupBG
{
background-color: #666699;
filter: alpha(opacity=50);
opacity: 0.7;
}
You can modifiy the CSS to include top & left positions based on where you want it to appear:
.ModalPopupBG
{
background-color: #666699;
filter: alpha(opacity=50);
opacity: 0.7;
top: 100px;
left: 100px;
}
Also, your code shows:
BackgroundCssClass="ModalPopupBG"
This should be:
CssClass="ModalPopupBG".
I believe you are in position: fixed; when you want to be position: absolute;, try that instead.
If that does not work, then try position: absolute!important; and see if that forces it to absolute position.
Try adding these 3 lines to your .ModalPopupBG class
position:absolute;
top:300px;
left:300px;
and tweak the pixels until it lines up to where you want it.
I have written the following css
.rightCheckBoxes {
float: right;
width: 139px;
margin: 4px 3px 2px 3px;
}
<div class="clearfix">
<g:HTML addStyleNames="{style.formLabel}" ui:field="accountHTMLLabel">A<u>c</u>count</g:HTML>
<fa:FocusAwareSuggestBox maxLength="20" addStyleNames="{style.formField} {style.accountWidth}" ui:field="accountSuggestBox"/>
<g:Button addStyleNames="{style.normalButtons} {style.rightAlignment} {style.rightFieldAdjust}" enabled="false" ui:field="allocationButton">Bu<u>tto</u>n</g:Button>
<g:CheckBox addStyleNames="{style.rightCheckBoxes}" checked="true" ui:field="allocationCompleteCB">Allocation Complete</g:CheckBox>
</div>
when I change it to the following :
.rightCheckBoxes {
float: right;
width: 139px;
margin: 4px 3px 2px 3px;
}
<!-- Added this -->
.rightCheckBoxWidth {
width:142px !important;
}
<!-- -->
<div class="clearfix">
<g:HTML addStyleNames="{style.formLabel}" ui:field="accountHTMLLabel">T<u>i</u>tle</g:HTML>
<fa:FocusAwareSuggestBox maxLength="20" addStyleNames="{style.formField} {style.accountWidth}" ui:field="acctSuggestBox"/>
<g:Button addStyleNames="{style.normalButtons} {style.rightAlignment} {style.rightFieldAdjust}" enabled="false" ui:field="button1">Bu<u>tto</u>n</g:Button>
<g:CheckBox addStyleNames="{style.rightCheckBoxes} {style.rightCheckBoxWidth}" checked="true" ui:field="chk2">Status Complete</g:CheckBox>
</div>
and click on the firebug option to view the element "chk2" it shows me the default style of the gwt checkbox element from the standard.css instead of picking up my own style above .Why is this I cannot understand logically!
I'm trying to do what I thought is going to be the simples thing on earth. I'm having some png box with graphic element that suppose to cover part of an image I was intending to disply inside this box (this is a product box and the graphic element is supposed to simulate price tag).
So I need to have the box and I wanted to display the image underneath it using asp:ImageButton.
I've been struggling with this for hours, trying to put divs and images etc. Tried all sort of things with z-order, with no success, the product image is still being displayed above the graphic box. Fot the price it has been working fine, though.
I thought this should work:
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<asp:Image ID="ibImage" runat="server" Width="140" Height="140" style="position: relative; z-index: 10;" />
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
</div>
</div>
</div>
Also tried:
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<div id="divImage" runat="server" style="position: relative; width: 140px; height: 140px;
z-index: 10;">
</div>
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
</div>
</div>
</div>
There is the css:
#HPItemBox
{
position: relative;
width: 190px;
height: 190px;
background-image: url('../images/home-product-box.png');
background-repeat: no-repeat;
background-color: #ffffff;
float: left;
z-index: 50;
}
.HPItemPrice
{
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #4d4d4d;
}
.HPimgBox
{
position: relative;
top: -10px;
right: 20px;
width: 170px;
z-index: 10;
}
Any ideas? Thanks in advanced.
Hey i think your code is some mistake please manage your code according to you and some change to your css file as like this
HTML
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<div id="divImage" runat="server" style="position: relative; width: 140px; height: 140px;background:green;
z-index: 10;">
Hello
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
</div>
</div>
</div>
</div>
Css
#HPItemBox
{
position: relative;
width: 190px;
height: 190px;
background-image: url('../images/home-product-box.png');
background-repeat: no-repeat;
background-color:red;
float: left;
z-index: 50;
}
.HPItemPrice
{
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #4d4d4d;
position: relative;
}
#HPItemLink
{
position: absolute;
bottom: 10px;
left: 10px;
z-index: 10;
border:solid 2px yellow;
}
Live demo check here http://jsfiddle.net/8yg49/1/
I came up with a somewhat crooked idea, but i'm short in time so if it works for now it's fine with me.
I'll sketch the idea. basically, I think that an imagebutton gets the highest z-order, so there is no point of putting it above any div hoping that it will reside behind it.
so my solution was to take out the imagebutton and just put the image using some div, and then put a fully TRANSPARENT imagebutton above.
it goes something like this:
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';" ImageURL="FULLY_TRANSPARENT_RECTANGLE!!!">Buy it</asp:LinkButton>
</div>
</div>
</div>
<div id="THE ACTUAL IMAGE!!!"> .... in this DIV I put the image using image control (NOT imagebutton!) and then relatively place it under HPItemBox div </div>
This way the actual image is presented under the frame div and the button is actually a rectangular transparent image so the image i wanted to display appears as the button (but without the 'click' affect.
This is driving me mental!!!
Ok, I have the following scenario - ModalPopupExtender used to display an UpdateProgress panel when AJAX is running. So I have the following:
<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress" >
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
<ProgressTemplate>
<div style="position: relative; top: 40%; text-align: center;">
<asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
<asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress"
BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress">
</ajaxToolkit:ModalPopupExtender>
Javascript to fire the thing when AJAX kicks ins:
<script type="text/javascript" language="javascript">
var ModalProgress = '<%= ModalProgress.ClientID %>';
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args) {
// shows the Popup
$find(ModalProgress).show();
}
function endReq(sender, args) {
// Hides the Popup
$find(ModalProgress).hide();
}
</script>
With the styling of :
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.50;
}
.updateProgress
{
float: right;
border-width: 1px;
border-style: solid;
background-color: #FAFAD2;
width: 250px;
height: 100px;
}
</style>
However, I cannot for the life of me get the updateProgress to float right or adjust position (just as an example).
Using the developer tools, I can see that some sort of inline style overides the CSS style.
How on earth can I get, for example, my updateprogress to float right?
If you're fighting against inline styles that you have no control over, this is one of those rare cases where the use of !important is actually justified:
Give this a try:
.updateProgress
{
float: right !important;
/* etc. */
}
If this doesn't work, try adding a clear:right, or using a more specific selector like:
#someElement .updateProgress {}
EDIT: Specificity in CSS selectors won't help against inline styles, so ignore that as a possible solution.
well I've ditch the style sheet and run with this:
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
<ProgressTemplate>
<div style="float: right; border-width: 1px; border-style: solid; background-color: #FAFAD2;
width: 250px; height: 100px;">
<div style="position: relative; top: 40%; text-align: center;">
<asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
<asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
It does the business so I'm happy for now :D
I have the following html which is display correctly in IE8. Below is the html and the css for grey_btn_75. Any idea why this would be happening?
<div style="float: left; width: 70px; margin-right: 25px; padding-top: 60px;
margin-left: 25px">
<asp:Button ID="btnAddAll" runat="server" Text="Add All"
OnClick="btnAddAll_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnAdd" runat="server" Text="Add"
OnClick="btnAdd_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnRemove" runat="server" Text="Remove"
OnClick="btnRemove_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnRemoveAll" runat="server" Text="Remove All"
CssClass="grey_btn_75"
OnClick="btnRemoveAll_Click" /><br />
</div>
CSS:
.grey_btn_75
{
background: url(../images/grey-75px.png);
background-repeat: no-repeat;
border-style: none;
font-family: Arial,Helvetica,Sans-Serif;
font-size: 12px;
font-weight: bold;
width: 75px;
height: 23px;
color: #000000;
cursor: pointer;
}
Things I have tried so far:
I removed the CssClass and the buttons still did not show up.
I modifed the CssClass and the buttons still did not show up.
I put other controls such as an asp:Label and and asp:ImageButton and they showed up fine.
I tried putting a new button and it did not show up.
Your div width is 70px, your button is 75px. You need to clean that up.
The problem is with the styles. Try commenting them out to see which one (or the combination) is responsible for the buttons to disappear.
Don't forget about the inline style of the top DIV as well.
This is a nice guide for button styles:
http://particletree.com/features/rediscovering-the-button-element/
People recommend
width:auto;
overflow:visible;
specifically for IE
I think it is the color value you have set in your CSS. I got the same problem previously and what I did was change the color value to something else.