ModalPopup div not displaying - asp.net

I have a ModalPopup window in my asp.net application, that I want to display when a Listview control item is clicked.
<div id="ModalPopup" style="visibility:hidden" runat="server">
<div style="position: absolute; width: 100%; height: 100%; z-index: 10002; background-color: Gray; filter: alpha(opacity=70); opacity: 0.7;">
</div>
<table style="position: absolute; width: 100%; height: 100%; z-index: 10003;">
<tr>
<td align="center" valign="middle">
<div style="color: Black; font-weight: bolder; background-color: White; padding: 15px; width: 200px;">
<asp:Image ID="Image4" runat="server" ImageUrl="~/Images/ajax-loader.gif" />...Processing....
</div>
</td>
</tr>
</table>
</div>
However, in my RadListView1_SelectedIndexChanged event, my code is: ModalPopup.Attributes.Add("style", "visibility:visible"); but the modal popup does not display.
How can I display it when a ListView item is selected?

Since you've already defined your ModalPopup div as a server control (e.g. runat=server) and you're trying to decide if to show it or not in codebehind - just use the Visible property...
<div id="ModalPopup" Visible="false" runat="server">
....
</div>
And in your RadListView1_SelectedIndexChanged event in code behind just change Visible to true:
protected void RadListView1_SelectedIndexChanged()
{
ModalPopup.Visible = true;
}
and if you insist on changing the visibility attribute itself, you can use RegisterStartupScript like this:
protected void RadListView1_SelectedIndexChanged()
{
ClientScript.RegisterStartupScript(this.GetType(), "ShowPopup", "document.getElementById('" + ModalPopup.ClientID + "').style.visibility = 'visible';", true);
}

Related

UpdateProgress div positioning

I'm trying to show a div on top of my grid view when the grid is loading.
This is how I placed my UpdateProgress, UpdatePanel and GridView:
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdtPnlRefList" >
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<span style="border-width: 0px; position: fixed; padding: 50px; background-color: #FFFFFF; font-size: 36px; left: 40%; top: 40%;">Loading ...</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdtPnlRefList" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView>
......
</asp:GridView>
...
I've used the ProgressTemplate code from another question which I've lost track to, however this code greys out the whole page, but i need to only grey out my grid.
Is that possible?
I've achieved this in the past by using the Ajax Control Toolkit's UpdatePanelAnimationExtender control.
<ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server" TargetControlID="YourUpdatePanel">
<Animations>
<OnUpdating>
<Sequence>
<ScriptAction Script="UpdatePanel_OnUpdating(updatePanelClientID, divToOverlayClientID);" />
<Parallel duration="0">
<FadeOut minimumOpacity=".5" />
</Parallel>
</Sequence>
</OnUpdating>
<OnUpdated>
<Sequence>
<Parallel duration="0" >
<FadeIn minimumOpacity=".5" />
<ScriptAction Script="UpdatePanel_OnUpdated(divToOverlayClientID);" />
</Parallel>
</Sequence>
</OnUpdated>
</Animations>
Ensure that you set the two required ClientIDs on load, like so:
<script type="text/javascript">
var updatePanelClientID = '<%=YourUpdatePanel.ClientID %>';
var divToOverlayClientID = '<%=divUpdateProgress.ClientID %>';
</script>
My div comprises this:
<div id="divUpdateProgress" runat="server" align="center" style="display: none; height: 40px; width: 200px; text-align: center; vertical-align: middle;">
<asp:Image ID="imgProgress" runat="server" ImageUrl="~/images/common/waitspin.gif" />
</div>
The final piece of the puzzle is the pair of JS functions called by the UpdatePanelAnimationExtender. They look like this:
function UpdatePanel_OnUpdating(updatePanelClientID, divClientID) {
// Displays a div over an updating UpdatePanel
// Get the update progress div
var divUpdateProgress = $get(divClientID);
// Make it visible
divUpdateProgress.style.display = '';
// Get the UpdatePanel element
var pnlUpdatePanel = $get(updatePanelClientID);
// Get the bounds of both the UpdatePanel and the progress div
var pnlUpdatePanelBounds = Sys.UI.DomElement.getBounds(pnlUpdatePanel);
var divUpdateProgressBounds = Sys.UI.DomElement.getBounds(divUpdateProgress);
// Work out where to position the element (the centre of the UpdatePanel)
var x = pnlUpdatePanelBounds.x + Math.round(pnlUpdatePanelBounds.width / 2) - Math.round(divUpdateProgressBounds.width / 2);
var y = pnlUpdatePanelBounds.y + Math.round(pnlUpdatePanelBounds.height / 2) - Math.round(divUpdateProgressBounds.height / 2);
// Set the progress element to this position
Sys.UI.DomElement.setLocation(divUpdateProgress, x, y);
}
function UpdatePanel_OnUpdated(divClientID) {
// Related to UpdatePanel_OnUpdating, above. Hides the div once the UpdatePanel has been updated
$get(divClientID).style.display = 'none';
}
This code was originally written almost 10 years ago, but I've just successfully reused it in a legacy project.
<asp:GridView>
<div style="position: relative;">
Code goes here
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdtPnlRefList" >
<ProgressTemplate>
<div style="position: absolute; display: table; width: 100%; text-align: center; top: 0; right: 0; left: 0; bottom: 0; z-index: 9999999; background-color: rgba(255,255,255,0.7);">
<span style="border-width: 0px; padding: 50px; font-size: 36px; display: table-cell"; vertical-align: middle;>Loading ...</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</asp:GridView>
place the <ProgressTemplate></ProgressTemplate> inside the <asp:GridView></asp:GridView> tags.
and give the <div> a position: relative; and the div inside the <ProgressTemplate></ProgressTemplate> a position: absolute;
.
Don't use opacity as it applies for the whole tag and everything inside. Unless that's exactly what you want.
I have used an rgba(255,255,255,0.7); which will only decrease the opacity of the background color to 70%.
I have vertically centered the <span>Loading ...</span> by adding display: table-cell"; vertical-align: middle; and adding display: table; to the parent tag.
It would be advisable to use a separate stylesheet for all this. =)
Hopefully this helps.
Its a wonderful day to CODE =)

CSS margin-top in Asp.net

<form id="form1" runat="server">
<div>
<div style="height: 350px; width: 250px; background-color: #ECECEA; color: #993399">
<div class="image">
<asp:Image ID="imgteacher" runat="server" Height="150" Width="250" /></div>
<div style="margin-left: 3px">
<div style="font-size: 28px">
<asp:Label runat="server" ID="lblname" Text="Mobile Web Development"></asp:Label></div>
<div style="margin-top: 140px; float: left">
<asp:Label ID="lbldate" runat="server" Text="01.04.2014"></asp:Label></div>
<div id="detail" style="margin-top: 150px; font-size: 20px; color: Fuchsia; margin-left: 190px">
Detail</div>
</div>
</div>
</div>
</form>
I am developing in Asp.Net .
I have so problem.
As shown above code margin-top for lbldetail is 140px. At this time it is on the bottom of gray window.
But here lblname can be change by user.
User can add long name as lblname. At this time lbldetail goes downwards and exits border of gray window.(if lblname would be little , at this time it goes up toward as shown picture)
But I want lbldetail's place would not be depend on lblname and its place would be constant(bottom of gray window)
I hope I could explain.
The div with id "detail" needs position absolute. and as Murali Murugesan said, you do need to lose the inline styles and use a CSS file.
div#detail
{
position:absolute;
top:330px;
font-size: 20px;
color: Fuchsia;
margin-left: 190px
}
You can find the example at: http://jsfiddle.net/9Bkha/

can not work the z-order in order to display one picture above the other

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.

Updateprogress panel, CSS and removal of inline stlyes

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

How to add css for div tag and Panel in asp

How do I add css for the Panle and the div tag, I am new to this I tried many ways but could not make it to work. How should I add css for individual Panel and individual Div tag. Thanks
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
<link href="Styles/AboutUs.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<asp:Panel ID="Panel2" runat="server" >
<div id="main">
</div>
</asp:Panel>
</asp:Content>
CSS:
----
.Panel2
{
position: relative;
top: -11px;
left: -20px;
height: 450px;
width: 928px;
}
.main
{
position: relative;
top: 17px;
left: 154px;
height: 110px;
width: 691px;
}
For this HTML
<asp:Panel ID="Panel2" runat="server" >
<div id="main">
</div>
</asp:Panel>
Change it to (see the change in BOLD)
<asp:Panel ID="Panel2" runat="server" **CssClass="pnlCSS"**>
<div id="main">
</div>
</asp:Panel>
and the css should be
#main
{
position: relative;
top: 17px;
left: 154px;
height: 110px;
width: 691px;
}
.pnlCSS
{
// CSS for panel here
}
If you what to use Ids instead of CssClass you will have to change your ClientIDMode="Static":
<asp:Panel ID="Panel2" ClientIDMode="Static" runat="server" >
<div id="main">
</div>
</asp:Panel>
What you need to do is look at the div and panel class in Firebug - when using ASP.NET Master pages, it will append certain things to your specified class; it will look something like #ct100_MainContent etc etc.
Again, take a look at Firebug and see what the div is being written to the browser as, and update that in your CSS.
You can use the CssClass property to define a css class for you panel div.
<asp:Panel ID="Panel2" runat="server" CssClass="myClass">
</asp:Panel>
And then use this class in your css:
.myClass {
position: relative;
top: -11px;
left: -20px;
height: 450px;
width: 928px;
}
Use
#main
{
position: relative;
top: 17px;
left: 154px;
height: 110px;
width: 691px;
}
and add CssClass="Panel2" to the panel

Resources