.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
.modalPopup
{
background-color: #ddffdd;
border-width: 3px;
border-style: solid;
border-color: Gray;
margin-top: 60px;
padding: 2px;
width: 400px;
font-size: 10pt;
}
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="Button3"
OkControlID="btnOk" TargetControlID="LinkButtonDummy" PopupControlID="PanelPopUp"
BackgroundCssClass="modalBackground" />
<asp:Panel ID="PanelPopUp" runat="server" CssClass="modalPopup" Style="display: none">
<div>
<asp:Label ID="lblMsg" runat="server" />
<asp:Button ID="Button2" runat="server" Text="Add New Organisation" OnClick="Button2_Click" />
<asp:Button ID="Button3" runat="server" Text="Cancel" />
</div>
</asp:Panel>
I have also included the AJAX reference and a ScriptManager on the master page.
I have to add an enhancement to an existing page and I'm quite new with ASP.NET, the page in question is a 'content page' and is linked to a master page (containing the scriptmanager).
This code all looks completely fine and I have been reading on this for over three hours now but to no avail - my modal doesn't 'pop-up' and grey the background out, it simply appears where I have placed it on the page (right at the top, or right at the bottom e.t.c.) as if I was just showing/hiding a div.
Can anyone help, I'm going crazy?
What other routes can I go down for adding a confirmation box on a page that takes a string built in the code-behind and also runs code-behind functions on OK/Cancel?
Keep your css as it it and try this code :
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:ModalPopupExtender ID="MyPopup" runat="server" CancelControlID="Button3" OkControlID="btnOk" PopupControlID="PanelPopUp" BackgroundCssClass="modalBackground" DynamicServicePath="" Enabled="True"
TargetControlID="HiddenField1"></asp:ModalPopupExtender>
and on Button2_Click event add
MyPopup.Show();
Related
So I'm trying to understand how this should be properly setup. I have a Updateprogress that shows a progress bar when a button is clicked. The button is wrapped in an UpdatePanel. But if there're any error, I want to stop the processing and then pop up a modal window (I used Modalpopupextender) to show the errors. My issue is, it just shows the box (or object) but without the texts that came from the Exception. Here's my code:
<asp:UpdatePanel ID="UpdatePanel_ActionButtons" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Approve" OnClick="Proccess_Click1" OnClientClick="this.disabled = true; this.value = 'Processing';" UseSubmitBehavior="false" />
</ContentTemplate>
</asp:UpdatePanel>
The Progress Bar:
<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="UpdatePanel_ActionButtons">
<ProgressTemplate>
<div style="background-color:Gray; filter:alpha(opacity=80); opacity:0.80; width: 100%; top: 0px; left: 0px; position: fixed; height: 800px;"></div>
<div style=" filter:alpha(opacity=100); position: fixed;
z-index: 100001;
left: 720px;
top: 105px;">
<div style="width:50px; height:50px; padding:50px; background-color:white; border:solid 1px black;">
<img alt="progress" src="../images/ajax-waiting.gif"/>
Processing...
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
The error box:
<asp:LinkButton ID="btnNotInUse" runat="server" />
<ajaxtoolkit:ModalPopupExtender ID="qaError" runat="server"
TargetControlID="btnNotInUse"
PopupControlID="pnlQAError"
BackgroundCssClass="modalPopupExtender" />
<asp:Panel ID="pnlQAError" runat="server" Style="display: none" CssClass="modalPopup">
<br />
<asp:Button ID="OkBtn" runat="server" Text="Ok" OnClick="OkBtn_Click" />
</asp:Panel>
Button Click Method:
protected void Proccess_Click1(object sender, EventArgs e)
{
List<string> validationErrors;
string returnurl;
Processrecord(out validationErrors);
if (validationErrors.Count() > 0)
{
foreach (var error in validationErrors)
{
qaFeedback.InnerHtml += error;
}
qaError.Show();
return;
}
else
{
returnurl = "toanotherpage.aspx";
}
}
So if you look as to how I add the errors, it's adding it to the "qafeedback" div. And then I would force it to show up and then return. What's happening is it would pop out the button box, with the button, but it doesn't show the texts I added. It would be helpful to know as well that when I remove the progress bar or animation, the whole thing works or shows the error messages.
Thoughts?
I have a following snippet of code in my ASP.NET application (simplified):
<asp:Panel ID="Panel7" runat="server">
<asp:TextBox ID="RecTextBox" runat="server" autocomplete="off" Height="18px" Width="800px"/>
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
CompletionListCssClass="autocomplete_completionListElements"
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
CompletionListItemCssClass="autocomplete_listItem"
CompletionSetCount="20"
DelimiterCharacters=";, :"
Enabled="True"
MinimumPrefixLength="2"
ServiceMethod="GetCompletionList"
ServicePath="Rec.asmx"
ShowOnlyCurrentWordInCompletionListItem="True"
TargetControlID="RecTextBox" />
<br />
<asp:Button ID="Button3" runat="server" Text="Add" OnClick="Button3_Click" />
<asp:Button ID="Button11" runat="server" Text="Remove" OnClick="Button11_Click" />
<br />
<asp:Panel ID="Panel8" runat="server" Height="150">
<asp:ListBox ID="ListBox1" runat="server" Width="800" Height="150"></asp:ListBox>
</asp:Panel>
</asp:Panel>
Along with CSS classes:
.autocomplete_completionListElements
{
overflow : auto;
height : 130px;
list-style-type : none;
}
/* AutoComplete highlighted item */
.autocomplete_highlightedListItem
{
background-color: #ffff99;
color: black;
padding: 1px;
}
/* AutoComplete item */
.autocomplete_listItem
{
background-color : window;
color : windowtext;
padding : 1px;
left :0px
}
The problem is that autocomplete plugin renders an unordered list. It is contained in the document if autocomplete list is visible or not:
<ul id="ContentPlaceHolder2_TabContainer1_TabPanel2_AutoCompleteExtender1_completionListElem" class="autocomplete_completionListElements" style="position: absolute;"></ul>
When the autocomplete list is visible, there is no problem, because user is able to select desired autocomplete element. In turn autocomplete list is hidden, the unordered list is invisible but overlays multi select HTML controls (because ul has height : 130px;), and there are problems with selecting elements inside the multiselect:
Problem occurs in FF and Opera, but not in IE and Chrome.
Please for help,
Best regards,
WP
I found one possible solution based on Javascript:
1) Modify autocomplete_completionListElements CSS class - remove height : 130px; property.
.autocomplete_completionListElementy
{
overflow : auto;
list-style-type : none;
}
2) Assign Javascript handlers to following AutoCompleteExtender properties: OnClientShown, OnClientHidden
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
CompletionListCssClass="autocomplete_completionListElements"
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
CompletionListItemCssClass="autocomplete_listItem"
CompletionSetCount="20"
DelimiterCharacters=";, :"
Enabled="True"
MinimumPrefixLength="2"
ServiceMethod="GetCompletionList"
ServicePath="Rec.asmx"
ShowOnlyCurrentWordInCompletionListItem="True"
TargetControlID="RecTextBox"
OnClientShown="autocompleteClientShown"
OnClientHidden="autocompleteClientHidden" />
3) Javascript handlers code:
function autocompleteClientShown(source, args) {
source._popupBehavior._element.style.height = "130px";
}
function autocompleteClientHidden(source, args) {
source._popupBehavior._element.style.height = "0px";
}
I have two ASP.NET 4.0 Menu controls for tabs and sub-tabs & one tree control for left side navigation on a page.
I'm using the selected CSS class to ensure that the selected tab/sub-tab/navigation is in different color.
Whenever i select one of these control's item, selected CSS applied on it but parent selection state lose.
How can I ensure that the top level menu item has a CSS class of selected when viewing a sub page?
Main Menu:
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
<asp:Menu ID="mainMenu" runat="server" Orientation="Horizontal"
MaximumDynamicDisplayLevels="0" RenderingMode="Table"
DataSourceID="SiteMapDataSource1"
ViewStateMode="Enabled">
<StaticMenuStyle CssClass="menu"/>
<StaticMenuItemStyle CssClass="menuItem"/>
<StaticSelectedStyle CssClass="menuSelectedItem"/>
</asp:Menu>
Sub Menu:
<asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="false" StartingNodeOffset="1"/>
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"
MaximumDynamicDisplayLevels="0" RenderingMode="Table"
DataSourceID="SiteMapDataSource2"
ViewStateMode="Enabled">
<StaticMenuStyle CssClass="menu"/>
<StaticMenuItemStyle CssClass="menuItem"/>
<StaticSelectedStyle CssClass="menuSelectedItem"/>
</asp:Menu>
Left Navigation:
<asp:SiteMapDataSource ID="SiteMapDataSource3" runat="server" ShowStartingNode="false"
StartingNodeOffset="2" />
<asp:TreeView ID="TreeView1" runat="server"
DataSourceID="SiteMapDataSource3"
ExpandDepth="2" NodeIndent="0">
<ParentNodeStyle Font-Bold="False" />
<HoverNodeStyle ForeColor="#5555DD" />
<SelectedNodeStyle BackColor="GhostWhite"/>
<NodeStyle BackColor="LightSteelBlue"/>
</asp:TreeView>
CSS:
.menu
{
background-color: black;
font-size: 12px;
font-family: Arial;
font-weight: bold;
}
.menuItem td
{
height: 24px;
width: 120px;
background: url(Images/unselectedTab.jpg) no-repeat;
text-align: center;
vertical-align: middle;
}
.menuSelectedItem td
{
height: 24px;
width: 120px;
background: url(Images/selectedTab.jpg) no-repeat;
text-align:center;
vertical-align:middle;
}
Did not read your code but according to me if you want to preserve parent menu item selected then you will have to check in your code that it is not getting removed. In your scripts there may be some code like -
$(this).parent().removeClass("selected");
Comment this line if it is present and check whether it works or not. If there is no such thing then you will have to apply class as below -
$(this).parent().addClass("selected");
Both of the above code line, you will find inside the function which is called on click of a menu.
Somebody asked similar question not long ago. But nobody answered comprehensively.
Assume I have:
<asp:Button id="b1" Text="Submit" runat="server" />
<asp:Button id="b2" Text="Submit" runat="server" />
I want to set the following property to both buttons:
height: 100px;
width: 50px;
Let's say both properties are included in a class. How do I apply that class into both buttons?
Thank's
Method 1
Add a CSS stylesheet with the following selector.
input[type="submit"] {
height: 100px;
width: 50px;
}
Method 2
Use an ASP.Net Theme.
Method 3
Set a class name on each button using the CssClass property.
Markup:
<asp:Button id="btn1" Text="Submit" CssClass="buttonStyle1" />
<asp:Button id="btn2" Text="Submit" CssClass="buttonStyle1" />
<asp:Button id="btn3" Text="Submit" CssClass="buttonStyle1" />
<!-- the class can be applied to any number of other elements -->
CSS:
.buttonStyle1 {
height: 100px;
width: 50px;
}
just give them the same class for css
<asp:Button id="b1" CssClass="TestStyle" Text="Submit" runat="server" />
<asp:Button id="b2" CssClass="TestStyle" Text="Submit" runat="server" />
.TestStyle
{
height: 100px;
width: 50px;
}
I am using ASP.NET 2.0 and AJAX extension tool.
I already created loading indicator on button submit. When I will click the button, the loading indicator will show after redirecting to the next page. But, I want to hide the page until processing has completed (after that redirect to next page).
I am using the following code:
<td style="width: 100px; height: 26px;">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" DynamicLayout="false" runat="server">
<ProgressTemplate>
<img src="Images/loading.gif" alt="Images/loading.gif" style="z-index: 100; left: 21px; position: absolute; top: 64px" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<dx:ASPxButton ID="btnOk" ClientInstanceName="btnok" runat="server" Style="z-index: 100; left: 90px; position: absolute;
top: 108px" Text="OK" Width="61px" BackColor="Gainsboro" OnClick="btnOk_Click" AutoPostBack="False" >
<DisabledStyle>
<Border BorderColor="Teal" />
</DisabledStyle>
<ClientSideEvents Click="function(s, e) {
ShowloadingImage();
}" />
</dx:ASPxButton>
</ContentTemplate>
</asp:UpdatePanel>
To "hide" your page you can make an overlay div over all, using this css
.OverAll
{
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:2 !important;
background-color:black;
}
using jquery we can hide the page on page loading...I am using following code
$(function() {
($.unblockUI);
$('#pnlLogin_btnOk').click(function() {
$.blockUI({ message: '<img src="Images/loading.gif" />' });
});
});