GoodDay guys!
Help me please.
Hello programmers and developers.
Im having a problem here.
I want to block the functionality of our whole page(includes master page) including the scrolling when our popup appeared.
Im using this code for my ModalPopupExtender:
<cc1:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnShowPopup" BackgroundCssClass="modalBackground" PopupControlID="CntrlPanel" DropShadow="true" BehaviorID="OrderDetailClient" >
</cc1:ModalPopu
pExtender>
then for my CSS code(this won't cover the master page):
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity: 0.7;
margin-top:-750px;
margin-left:0px;
}
It doesn't block the whole page and when some data is added in the page the location of the background changes.
We have a nested gridview inside our page and when we click the image button the popup appears but the ModalPopupExtender always appear after the nested gridview.
Is it possible to block the whole page including the scrolling when my popup show?
please help.
This is my whole page:
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default3.aspx.vb" Inherits="Default3" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
var Grid = null
var UpperBound = 0;
var LowerBound = 1;
var CollapseImage = 'Images/plus.gif';
var ExpandImage = 'Images/minus.gif';
var Rows = null;
var n = 1;
var TimeSpan = 25;
window.onload = function toggleDiv(divid) {
if (document.getElementById(divid).style.display == 'none') {
document.getElementById(divid).style.display = 'block';
} else {
document.getElementById(divid).style.display = 'none';
}
}
{
Grid = document.getElementById('<%= me.grdCategory %>');
UpperBound = parseInt('<%= me.grdCategory.Rows.Count %>');
Rows = Grid.getElementsByTagName('tr');
}
function Toggle(Image, Index) {
ToggleImage(Image, Index);
ToggleColumns(Image, Index);
}
function ToggleImage(Image, Index) {
if (Image.src.indexOf(ExpandImage) > -1) {
Image.src = CollapseImage;
Image.title = 'Collapse';
n = LowerBound;
Image.IsExpanded = true;
} else {
Image.src = ExpandImage;
Image.title = 'Expand';
n = UpperBound;
Image.IsExpanded = false;
}
}
function ToggleColumns(Image, Index) {
if (n < LowerBound || n > UpperBound) return;
Rows[n].getElementsByTagName('td')[Index].style.visibility = Rows[n].getElementsByTagName('td')[Index].style.visibility == '' || Rows[n].getElementsByTagName('td')[Index].style.visibility == 'visible' ? 'hidden' : 'visible';
if (Image.IsExpanded) n++; else n--;
setTimeout(function() { ToggleColumns(Image, Index); }, TimeSpan);
}
</script>
<script type="text/javascript">
function daya() {
document.getElementById('<%=button2.ClientID%>').click();
}
function CloseDialog() {
$find("OrderDetailClient").hide();
}
</script>
<br />
<div>
<br /><div class="hr" >
<hr>
</div>
<asp:Label ID="Label4" runat="server" Font-Bold="True" Text="Training Plan Year:"></asp:Label>
<br />
<asp:DropDownList ID="drpdwnYear" runat="server" Width="173px" AutoPostBack="True">
</asp:DropDownList>
<asp:Label ID="Label5" runat="server" ForeColor="#DBE9EB" Text="|" Width="5px"></asp:Label>
<asp:Button ID="bntCreateYear" runat="server" Text="Create" Width="79px" Height="20px" Font-Names="verdana,arial,helvetica,sans-serif" Font-Size="XX-Small" /><br />
<div class="hr2">
<hr />
<br />
</div>
<div class="hr3">
<hr />
<div class="hr" >
<hr>
</div>
</div>
<asp:Label ID="Label6" runat="server" Font-Bold="True"
Text="Add Course Category:"></asp:Label>
<br />
<asp:TextBox ID="txtcategory" runat="server" Width="335px"
Font-Names="verdana,arial,helvetica,sans-serif" Font-Size="XX-Small"
Height="17px"></asp:TextBox>
<asp:Button ID="btnCatAdd" runat="server" Text="Insert" Width="107px" Font-Names="verdana,arial,helvetica,sans-serif" Font-Size="XX-Small" Height="20px" />
<br />
<br />
</div>
<div>
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<div id="divwidth">
<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" MinimumPrefixLength="1"
ServiceMethod="GetInfo" ServicePath="WebService.asmx" TargetControlID="txtcategory" CompletionInterval="10"
CompletionListCssClass="AutoExtender"
CompletionListItemCssClass="AutoExtenderList"
CompletionListHighlightedItemCssClass="AutoExtenderHighlight"
CompletionListElementID="divwidth"
CompletionSetCount="10">
</cc1:AutoCompleteExtender>
</div>
<div class="hr2">
<hr />
</div>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img alt="Update in Progress" src="Images/load.gif" height="30px"/>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="grdCategory" runat="server" AutoGenerateColumns="False"
Width="900px" DataKeyNames="CourseCatID" Font-Names="verdana,arial,helvetica,sans-serif" Font-Size="8pt" CellPadding="4" ForeColor="#333333" GridLines="None">
<Columns>
<asp:BoundField HeaderText = "CourseCatID" DataField="CourseCatID" />
<asp:TemplateField HeaderText="Course Category">
<ItemTemplate>
<a href="java<!-- no -->script:toggleDiv('mydiv<%# Eval("CourseCatID")%>')"><asp:Image ID="img" onclick="javascript:Toggle(this);" runat="server" ImageUrl="~/Images/minus.gif"
ToolTip="Collapse" Width="7px" Height="7px" ImageAlign="AbsMiddle"/></a>
<asp:Label ID="lbllastname" Height="15px" runat="server" Text='<%# Eval("CourseCatName")%>'> </asp:Label>
<div id="mydiv<%# Eval("CourseCatID")%>" >
<br />
<asp:ImageButton ID="ImageAdd" Height="17px" ImageUrl="Images/addCourse.png" runat="server" CommandName="cmdAdd" CommandArgument='<%# Eval("CourseCatID") %>' OnClick="ImageAdd_click"
/><br /><br />
<asp:GridView ID="grdCourse" runat="server" Width="800px" HorizontalAlign="Right" AutoGenerateColumns="False" align="center" DataKeyNames="CourseCode" Font-Names="verdana,arial,helvetica,sans-serif" Font-Size="8pt" BackColor="White"
GridLines="Vertical" >
<Columns>
<asp:TemplateField HeaderText="CourseName" HeaderStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:Label ID="lblCoursename" runat="server" Text='<%# Eval("CourseName")%>' Width="300px" Height="10px"> </asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Course Code" HeaderStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:Label ID="lbllastname" runat="server" Text='<%# Eval("CourseCode")%>' Height="10px"> </asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText = "Duration" DataField="Duration" HeaderStyle-HorizontalAlign="Left" />
<asp:TemplateField HeaderText="Edit" HeaderStyle-HorizontalAlign="Left" >
<ItemTemplate>
<asp:ImageButton ID="ImageLink" Height="15px" ImageUrl="Images/edit.png" runat="server" CommandName="cmdlink" PostBackUrl='<%#"CourseUpdate.aspx?CourseName=" & Eval("CourseName")%>' />
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Delete" HeaderStyle-HorizontalAlign="Left" >
<ItemTemplate>
<asp:ImageButton ID="ImageDeleteCourse" Height="15px" ImageUrl="Images/Delete.png" runat="server" CommandName="cmdDelete" CommandArgument='<%# Eval("CourseCode")%>' OnClick="ImageDeleteCourse_Click" OnClientClick="return confirm('Are you sure to delete this Course?')"
/>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True" />
</Columns>
<RowStyle BackColor="White" ForeColor="#333333" />
<FooterStyle BackColor="White" ForeColor="#333333" />
<PagerStyle BackColor="#336666" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
</asp:GridView>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Delete" >
<ItemTemplate>
<asp:ImageButton ID="ImageDelete" Height="15px" ImageUrl="Images/Delete.png"
runat="server" CommandName="cmdDelete"
CommandArgument='<%# Eval("CourseCatID") %>' Width="16px" onclick="ImageDelete_Click"
/><br />
</ItemTemplate>
<ItemStyle VerticalAlign="Top" />
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True" />
<asp:TemplateField>
<ItemTemplate>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#EFFDFF" ForeColor="#333333" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
<EditRowStyle BackColor="#999999" ForeColor="White" />
<AlternatingRowStyle BackColor="White" ForeColor="#333333" VerticalAlign="Middle" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label ID="Label10" runat="server" ForeColor="#DBE9EB" Text="|" Width="5px"></asp:Label>
<asp:Label ID="Label11" runat="server" ForeColor="#DBE9EB" Text="|" Width="5px"></asp:Label>
<br />
</div>
<br />
<asp:Button id="btnShowPopup" runat="server" style="display:none" />
<cc1:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnShowPopup" BackgroundCssClass="modalBackground" PopupControlID="CntrlPanel" DropShadow="true"
BehaviorID="OrderDetailClient" >
</cc1:ModalPopupExtender>
<div id="CntrlPanel" style="display:none" class="popup" size="50px" runat="server">
<asp:UpdatePanel ID="UPanel" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server">
<asp:Label ID="lblResult" runat="server" Visible ="false" ForeColor="Red" Font-Bold="true" ></asp:Label><br />
<asp:Label ID="Label7" runat="server" Text="Search: " Width="100px"></asp:Label>
<asp:TextBox ID="txtSearchBox" onChange="daya();" Width="250px" runat="server" Font-Names="verdana,arial,helvetica,sans-serif" Font-Size="XX-Small"></asp:TextBox>
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Course Code: " Width="100px"></asp:Label>
<asp:TextBox ID="txtCourseCode" runat="server" Width="173px" Font-Names="verdana,arial,helvetica,sans-serif" Font-Size="XX-Small"></asp:TextBox>
<asp:CheckBox ID="checkMultiCode" text="MultiCode" runat="server" Font-Names="verdana,arial,helvetica,sans-serif" Font-Size="XX-Small" />
<div style="removed:absolute;removed455px;removed65px;width:50px">
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UPanel">
<ProgressTemplate>
<img alt="Update in Progress" src="Images/load.gif" height="30px"/>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
<br />
<br />
<asp:Label ID="Label2" runat="server" Text="Course Name: " Width="100px"></asp:Label>
<asp:TextBox ID="txtCourseName" runat="server" Width="250px" Font-Names="verdana,arial,helvetica,sans-serif" Font-Size="XX-Small"></asp:TextBox>
<br />
<br />
<asp:Label ID="Label3" runat="server" Text="Duration: " Width="100px"></asp:Label>
<asp:TextBox ID="txtCourseDuration" runat="server" Width="250px" Font-Names="verdana,arial,helvetica,sans-serif" Font-Size="XX-Small"></asp:TextBox>
<br />
<br />
<br />
<asp:Button ID="ButtonSave" runat="server" HorizontalAlign="right" Text="Save" Enabled ="false" align="right" OnClientClick="CloseDialog()" />
<asp:Button ID="btnCancel" runat="server" align="right" Text="Cancel"/>
<asp:Button ID="Button2" runat="server" align="right" Text="Cancel" style="display:None"/>
<br />
<br />
<asp:TextBox ID="txtCourseCatID" style="display:none" runat="server"></asp:TextBox>
<asp:TextBox ID="txtCourseID" style="display:none" runat="server"></asp:TextBox>
<asp:TextBox ID="txtCode" style="display:none" runat="server"></asp:TextBox>
<div id="div1">
<cc1:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server" TargetControlID="txtSearchBox"
CompletionListCssClass="AutoExtender"
CompletionListItemCssClass="AutoExtenderList"
CompletionListHighlightedItemCssClass="AutoExtenderHighlight"
CompletionListElementID="div1"
CompletionSetCount="10"
ServicePath="WebService.asmx"
ServiceMethod="CourseCode"
CompletionInterval="10"
MinimumPrefixLength="1"
>
</cc1:AutoCompleteExtender>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
and here is my master page
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<html xmlns:o="urn:schemas-microsoft-com:office:office" dir="ltr" lang="en-us"><head><meta name="GENERATOR" content="Microsoft SharePoint"><meta name="progid" content="SharePoint.WebPartPage.Document"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="Expires" content="0"><title>
Training Plan
</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/portal.css">
<link rel="stylesheet" type="text/css" href="css/core.css">
<link rel="stylesheet" type="text/css" id="onetidThemeCSS" href="css/Jet1011-65001.css"><script type="text/javascript">
// <
Submit an article or tip