AJAX :: Modal Popup Background CSS Not Working
May 7, 2015
Problem: When I tick the checkbox inside Gridview, modalPopup opens but its BackgroundCssClass is not being applied to it, and the popup just shows up at the left side corner of the page without changing the background and opacity.
I had installed Ajax TookKit for Framework 4.5 in Visual Studio 2013
Here is the code:
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<head runat="server">
<style type="text/css">
.modalBackground {
background-color: black;
filter: alpha(opacity=90);
[Code] ....
Also tried:
<cc1:ToolkitScriptManager ID="ToolKitScriptManager1" runat="server"></cc1:ToolkitScriptManager>
in place of:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
View 1 Replies
Similar Messages:
Jan 17, 2010
I am trying to get a modal popup inside a modal popup?, also i want to fire the modal popup on a condition in a text change event of a textbox?...is this possible and can anyone give me directon on this
View 5 Replies
Jun 23, 2010
I am having a problem with the modal popup in that it never seems to popup and can be seen behind the background and not able to be accessed. I have tried setting the z-index of the panel above that of the background using css but this makes no difference.
My code is as follows:
[Code]....
View 3 Replies
Oct 29, 2010
using .net 4.0 and trying to open a modalpopup with grid loading; it pops up but doesn't grayout the rest of the page, allowing more clicking on the grid. I want the page to grayout with modalpopup and disable any further activity until the grid is loaded.
[Code]....
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<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) {
// shows the Popup
$find(ModalProgress).hide();
}
function CallPrint(url, window) {
window.open(url, window, 'left=0,top=0,width=900,height=600,toolbar=1,scrollbars=1,status=0');
}
</script>
<div>
<asp:ModalPopupExtender ID="ModalProgress" runat="server" BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress"
TargetControlID="panelUpdateProgress">
</asp:ModalPopupExtender>
</div>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table class="style1">
<tr>
<td>
<asp:Literal ID="litMedResult" runat="server"></asp:Literal>
</td>
</tr>
<tr>
<td>
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1">
<asp:TabPanel ID="tpFilter" runat="server" HeaderText="Show AICE Filtered Meds">
<ContentTemplate>
<asp:GridView ID="gvFilteredMeds" runat="server" AutoGenerateColumns="False"
BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px"
CellPadding="3" GridLines="Vertical"
onrowdeleting="gvFilteredMeds_RowDeleting" DataKeyNames="AICEMedID">
<AlternatingRowStyle BackColor="Gainsboro" />
<Columns>
<asp:BoundField DataField="AICEMedID" Visible="False" />
<asp:BoundField DataField="node_descrp" HeaderText="Med" />
<asp:CommandField DeleteText="Remove From Filter"
HeaderText="Remove From Filter" ShowDeleteButton="True" >
<ControlStyle ForeColor="Red" />
</asp:CommandField>
</Columns>
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#0000A9" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#000065" />
</asp:GridView>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="tpAllMeds" runat="server" HeaderText="Show All Meds">
<ContentTemplate>
<asp:GridView ID="gvAllMed" runat="server" AutoGenerateColumns="False"
BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px"
CellPadding="3" GridLines="Vertical" DataKeyNames="node_id"
onrowdatabound="gvAllMed_RowDataBound">
<AlternatingRowStyle BackColor="Gainsboro" />
<Columns>
<asp:BoundField DataField="node_id" Visible="False" />
<asp:BoundField DataField="node_descrp" HeaderText="Meds" />
<asp:TemplateField HeaderText="Add to Filter List">
<ItemTemplate>
<asp:Button ID="btnAddMed" runat="server" Font-Bold="true" OnClick="btnAddMed_Click" Text="Add Med" />
</ItemTemplate>
<ControlStyle Width="100px" />
<HeaderStyle Width="60px" />
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#0000A9" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#000065" />
</asp:GridView>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel></div>
<div>
<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress" >
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server">
<ProgressTemplate>
<div style="position: relative; top: 45%; text-align: center;">
<img alt="Processing" class="style3"
src="Images/loading.gif" />Processing ...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
</div>
</asp:Content>
View 8 Replies
Apr 1, 2011
I have a modal popup that on the first time it is running, if the user clicks the greyed out background the modal closes. On the 2nd and later times it runs correctly. The user can click the background and it works correctly. I have searched around and tried a few things with out any luck.
Here is the code.
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true"> </telerik:RadScriptManager>
<ajax:ModalPopupExtender ID="GlobalModalPopupExtender" runat="server" PopupControlID="GlobalpnlPopup" TargetControlID="GlobalMain" BackgroundCssClass="modal_background"> </ajax:ModalPopupExtender>
<div id="GlobalMain" runat="server"> </div> <asp:Panel ID="GlobalpnlPopup" runat="server" Style="display: none; background-color: White; border-width: 4px; border-style: solid; border-color: #EA0A8D; padding: 4px; height: 40px; width:
200px; z-index: 10000; " CssClass="RadButton"> <table align="center"> <tr> <td align="center"> <asp:Image ID="imgGlobalProcessing" CssClass="progress_image" runat="server" ImageUrl="~/images/ajax-loader.gif"
/> <b>Processing...</b> </td> </tr> </table> </asp:Panel>
<script type="text/javascript">
Sys.Application.add_load(GlobalApplicationLoadHandler);
function GlobalApplicationLoadHandler(sender, args) { var prm = Sys.WebForms.PageRequestManager.getInstance(); if (!prm.get_isInAsyncPostBack()) { prm.add_initializeRequest(initRequest); prm.add_endRequest(endRequest);
} } function timer() { return true; }
function initRequest(sender, args) { var pop = $find("<%=GlobalModalPopupExtender.ClientID%>"); pop.show(); }
function endRequest(sender, args) { var pop = $find("<%=GlobalModalPopupExtender.ClientID%>"); pop.hide(); } </script>
.modal_background { background-color:Gray; filter:alpha(opacity=65); -moz-opacity:0.65; /* It is for Mozilla firefox browser */ Opacity:0.65; }
View 1 Replies
Apr 18, 2012
I am using multiple ajax modal pup-ups. When i click on one of the pop-up, the background should be in freeze mode. so, that the users cannot click on the other pop-ups untill the opened pop-up should be closed.
View 1 Replies
May 14, 2010
I am using modal popup extender in my web page, it is working fine, but when the page contents are expanded, modal popup displays with no background color. Here is more info -
The web page contains bunch of update panels that have reports in iFrame controls inside it. On click of save, I display modal popup with confirmation message. Initially, all panels are collapsed, modal popup is displayed properly with the gray background color. When i expand all the panels, page gets really huge and modal popup displays no background color (transparant). Below are the styles I am using -
.modalPopupBackground
{
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.50;
}
.modalPopup
{
background-color: white;
border-width: 3px;
border-style: solid;
border-color: #165EA9;
padding: 3px;
width: 600px;
height: 150px;
}
Here is the modal popup code -
<asp:Button ID="btnHiddenTarget" runat="server" Style="display: none" Text="HiddenTargetControlForModal" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnHiddenTarget"
BackgroundCssClass="modalPopupBackground" PopupControlID="ModalPanel1" OkControlID="btnModalYes"
DropShadow="true" PopupDragHandleControlID="ModalPanel3" />
<asp:Panel ID="ModalPanel1" runat="server" Style="display: none;" CssClass="modalPopup">
<asp:UpdatePanel runat="server" ID="updPopupMsg">
<ContentTemplate>
<asp:Panel ID="ModalPanel3" runat="server" Style="cursor: move; background-color: #DDDDDD;
border: solid 1px Gray; color: Black; height: 20px">
<div>
<p style="text-align: center;">
<asp:Label runat="server" ID="lblInfoPopupHeader" Font-Bold="true"></asp:Label></p>
</div>
</asp:Panel>
<asp:Panel runat="server" ID="pnlPopupMsg" Style="text-align: left; vertical-align: middle;
overflow: auto; height: 100px">
<p>
<asp:Label runat="server" ID="lblInfoPopup" Font-Bold="true"></asp:Label></p>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<p style="text-align: center; vertical-align: bottom; height: 20px">
<asp:Button ID="btnModalYes" runat="server" Text="OK" CssClass="commandButton" Style="width: 100px;"
IgnoreDirty="Dirty" />
</p>
</asp:Panel>
Technical Environment - VS 2008 and AjaxControlToolkit 3.5.40412.0.
View 4 Replies
Apr 27, 2010
I have a huge content on a page which scroll's down vertically and when I try to popup a modalpopup control on this page, some part of the screen is not grayed out on IE6 and user can interact with the background page ( even when modal popup is open) . This happens only on IE6 works fine on IE8 and firefox .
View 2 Replies
Nov 1, 2010
when i call modal popup extender the background is scrolling , i want to freeze the background page then is there any properties or any other idea to get this ..
View 5 Replies
Dec 17, 2010
The title of this post says almost all.
This happens only sometimes on the same code, but when I open a modal popup window, mouse focus
stays on the background and buttons on the modal popup does not response.
If I move the mousepointer, I can see that buttons on the background are highlighted by mouseover, and I can even click on them.
I have tried to find when this happens by trying different mouse movement without luck.
Does any one have the same experience? I would like to know why this happens and/or how I can pretend this behavior.
View 3 Replies
Jan 5, 2011
I have a Ajax modal popup extender .Its working fine in FF but not in Ie .
View 1 Replies
Jun 9, 2010
The Top is IE and the bottom is FireFox. Firfox is showing correctly. In IE, however, the grey background start directly on the left edge of the page and not across the window span, and the modal target stays below the grey background.
[Code]....
View 2 Replies
Aug 9, 2010
In my application modal popup extender is not working in mozilla. but it is working well in IE 7 perfectly.
View 1 Replies
Aug 11, 2010
Modal PopUp Extender Catch exception error and display on modal popup
[Code]....
View 2 Replies
Jun 23, 2010
I have a gridview in an updatepanel that is set to always update. I have a delete command button in an item tamplate. For this delete button I am using a ConfirmButtonExtender and ModalPopupExtender for deleting. This works fine initially when the page first loads. However, if I edit an item in the grid (which hides the grid and displays the selected item's info) and either save or cancel (which displays the grid again) and then try the delete, the modal popup displays, and if I click yes to delete, the row will now not delete. The delete command does not fire. Here is the code for my gridview.
[Code]....
View 1 Replies
Oct 24, 2010
I am having a problem with a modal popup that has a vertical scroll bar. In IE the vertical scroll bar works as it should. However in Firefox, if I try to click and drag the scroll box or "thumb" along the track the whole modal popup is draged accross the screen. The scroll buttons will advance the scroll, I just can't grab the tumb without dragging the whole screen.
The popup text is in a div with the following properties:
<div style="height: 465px; width: 742px; overflow-y: scroll; overflow-x: hidden; float: left;">
View 3 Replies
Apr 9, 2010
I have an Ajax ModalPopupExtender on a page. To summarise. I have a link on a page, when I click the link the modal popup displays. On this modalpopup I've a textbox and an 'ok' and 'cancel' button. I wish to find out what was entered in the textbox when the button is clicked I try this but the value of ((TextBox)button1.Page.FindControl("theTitle")) is null.
if (((TextBox)button1.Page.FindControl("theTitle")).Text == "")
void okButton_Click(object sender, EventArgs e)
{
try
{
//if i try this tt does not compile//The name 'theTitle' does not exist in the current context//if(theTitle.Text == "")//{//}
Button button1 = (Button)sender;
//TextBox theTitle = ((ImageButton)(e.Item.FindControl("theTitle")));
if (((TextBox)button1.Page.FindControl("theTitle")).Text == "")
{
}
else
{
}
}
catch (Exception)
{
}
}
View 3 Replies
Apr 27, 2016
Modal popup not working, I need to open modal pop up inside a panel, below is my html, senerio goes as :
On page load on only panel with id="pnlgrid" is visible and button with id btnaddnew is visible on clicking addnewbutton panel grid is visible false and panel with id=pnlFormEdit is visible true.
Inside there is linkbutton1 on which click i want to open popup. but on clicking it goes postback.
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="DutySlip.aspx.vb" Inherits="_DutySlip" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<style type="text/css">
[Code] .....
View 1 Replies
Dec 23, 2015
I'm using the ASP.Net Validation controls and I want to display the Validation Summary in a JQuery Dialog instead of the native javascript alert messagebox. I've found this solution (aspsnippets) by overriding the clientside WebForm_OnSubmit() function:
<script type="text/javascript">
function WebForm_OnSubmit() {
if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
$("#validation_dialog").dialog({
title: "Validation Error!",
modal: true,
resizable: false,
[Code] ....
The WebForm_OnSubmit() function is being rendered by the BaseValidator control and in the form tag te following attribute is being added: onsubmit="javascript:return WebForm_OnSubmit();
I am running into a problem on a page which has an UpdatePanel. The input field with the validator (1 to make it simple) is in a Panel within an UpdatePanel. The Panel is set to Visible=False at the first Page Load. There's a button inside the UpdatePanel which makes the Panel with the Validator Visible.
When this happens, the WebForm_OnSubmit() function and the onsubmit="javascript:return WebForm_OnSubmit(); attribute of the form tag are not being rendered because it's an AJAX callback and the form tag is outside the updatepanel (in a master page), so the validation summary will not be shown in the jquery dialog.
Validation is being performed, so the validation summary wil be shown in a div on a page, but the validation is not being called by the WebForm_OnSubmit() function in this case, because it's not being rendered.
Here's the markup of the page:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnNew" runat="server" Text="New" />
<asp:Panel ID="pnlEdit" runat="server">
<table>
[Code] ....
So, when the validators are not visible at the first load and they will be made visible by an AJAX callback, the WebForm_OnSubmit() function and the onsubmit="javascript:return WebForm_OnSubmit(); attribute of the form tag are not being rendered on the pag. Because of that, the WebForm_OnSubmit() function will not be called and the validation summary will not be shown in the JQuery dialog (although it is being shown in a div on the page). How can I get the Validation Summary to be shown in de JQuery dialog in this case?
Is there another function that has to be overriden for this case? I know I can use a Full Postback for the New button and then all the stuff needed is being rendered on the page, or I can make the panel not visible by using a style, but I don't prefer that because there are a lot of pages with this situation.
One solution is to use a dummy textbox with a dummy validator (with a dummy validationgroup) of which I set the display to none. Then this dummy validator will cause the the WebForm_OnSubmit() function and the onsubmit="javascript:return WebForm_OnSubmit(); attribute of the form tag to be rendered.
View 1 Replies
May 7, 2015
I have three modal popup and three link buttons the first link button is on menu i.e. login that shows login-popup and the login popup contains two links forgot password and register both of them opens a popup but the problem is the login popup isnt hiding with click on register or foreget link the popups are appearing perfectly but arent hiding.
The html for all three popup is as shown below:-
<cc1:ModalPopupExtender ID="Modallogin" runat="server" PopupControlID="loginpanel" TargetControlID="loginlink" BackgroundCssClass="modalBackground"
CancelControlID="lnkforgot">
</cc1:ModalPopupExtender>
<asp:Panel ID="loginpanel" runat="server" CssClass="modalPopup">
[Code] .....
And the codebehind file that i wrote some code which also isnt working is as shown below:-
protected void Button2_Click(object sender, EventArgs e) {
Modalforget.Hide();
} protected void lnkregister_Click(object sender, EventArgs e) {
Modallogin.Hide();
Modalregister.Show();
[Code] ....
I also used breakpoints on link click event and are not going to code behind file on click and popup is just shown without hiding the other. And the css used is I found on aspsnippet site!
View 1 Replies
Oct 2, 2010
I have a problem with a Model Popup Extender that monitoring a background thread.
I need to give feedback to the user about tasks that happend in the server side.
So searching on internet this give me a solution [URL]
Launch a thread, passing the Session variable, update a flag and a mesage and show the info in the web with a timer.
almost all, is fine, in one server (sadly, close to production) after the task (and thread) is completed, the Session variable is set to null and the user is redirected to a "Session Expired" Page.
[code].....
I noticed that this is a very slow server and some websites are very slow.
Session is managed with cookies and the timeout is set to 30 min.
View 1 Replies
Mar 18, 2010
In aspx page I have dynamically loaded user control(ascx). Everything is working correctly.But it takes too much time due to large amount of time.
Now I try to add Page loading progress in aspx page, its not working.
I use a asp:panel to show modal backgroud when loading.
In aspx page:
[Code]....
View 8 Replies
Jul 29, 2010
Modal Popup user control (its a message box) on top of a modal popup with javascript that maintains postback on a scrollable div all inside of an update panel causes my page to flash on postback of the user control. If any one of the peices (user control, modal popup, javascript) are missing everything works fine. The javascript is maintaing scrollback on a scrollable listview on the page. A modalpopup is shown on top of this main page that is for report parameters. The user control is used for validation and is displayed if a parameter is invalid. I know this may not be the best design, but it can't really change unless its a minor change. Heres the js if anyone wants to see popup or styles let me know.
//Begin methods to maintain or reset scroll position during postback.
var controlIds = [];
var scrollTops = [];
//Register a control to maintain its scroll position on postbacks.
function MaintainPostback(controlId) {
controlIds.push(controlId);
}
//Find the div/control id in the controlIds array and set its scroll position to 0.
function ResetControlScrollTop(controlId) {
var index = 0;
while (index < controlIds.length) {
if (controlId == controlIds[index]) {
scrollTops[index] = 0;
return;
}
index++;
}
}............
View 6 Replies
Jan 24, 2013
I look for a good way for arrangement Admin pages Items
for example Admin Upload Page consists of these sections:
* make a new folder
* delete folder
* upload file in folder
* show folders information (in a gridview)
* download test
so I think one way is showing this sections in modal
but when I tried make a new folder in modal after clicking in create folder button modal disappeared.
Is there any way that modal doesnt disappear until user click close button?
I mean I want modal to behave like a page.
If there isn't a way what to do for classification sections?
View 1 Replies
Jul 27, 2010
I'm using modal popup extender and panel with calendar in it. Click the "Next / Previous Month" closes the modal popup. How do I tell the modal popup to ignore click events in a calendar control inside the panel targeted for popup? I'm confused because when using extender before, you had to click OkButton or Cancel to close popup. I have update panel for reason. I just minimized the code for easy review.
[Code]....
View 5 Replies
