First Problem:
I am using modalpopupextender to show a message on page_load according to a criteria. I am using a Panel "pnlpopup" to show the message. When the page_load, the panel is shown.
The markup view is as follow:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Testing_Default" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title></title><style type="text/css">
.modalBackground
{
background-color:Gray ;
}
.modalPopup
{
background-color:#00CC66 ;
border-width: 3px;
border-style: solid;
border-color: black;
width: 300px;
height: 140px;
}
.BtnStyle
{
width:100px;
height:30px;
margin-top:30px;
font-family:Sakkal Majalla;
font-size:18px;
}
.LblStyle
{
font-family:Sakkal Majalla;
font-size:20px;
}</style></head><body><form id="form1" runat="server"><cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></cc1:ToolkitScriptManager><script language="javascript" type="text/javascript">
//Function to Hide ModalPopUp
function Hidepopup() {
$find('ModalPopupExtender1').hide();
}
//Function to Show ModalPopUp
function Showpopup() {
$find('ModalPopupExtender1').show();
}</script><div><asp:Button ID="btnShowPopup" runat="server" Style="display:none" /><cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" X="900" Y="400" TargetControlID="btnShowPopup" PopupControlID="Panel1" BackgroundCssClass="modalBackground" ></cc1:ModalPopupExtender><asp:Panel ID="pnlpopup" runat="server" CssClass="modalPopup" Style="display:none" ><table id="Tbl" runat="server" ><tr><td align="center"><asp:label ID="Lbl" runat="server" CssClass="LblStyle" Text="You can not forward the letter because the period finished. You can only make replying"></asp:label></td></tr><tr><td align="center" ><asp:Button ID="btnYes" runat="server" Text="OK" CssClass="BtnStyle" /></td></tr></table></asp:Panel></div></form></body></html>The running result page is shown on the link:
http://postimg.org/image/frh5itvpj/
However, when I add object (image) to the page, the panel is moved by the new object and shifted down, while it is supposed to appear on its same location before the new object is added. The panel should be shown on the very front layer of the page so the user interact directly with it.
The aspx markup view after adding the object (image) - Bolded Code is the extra code to add the image - to the page:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Testing_Default" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title></title><style type="text/css">
.modalBackground
{
background-color:Gray ;
}
.modalPopup
{
background-color:#00CC66 ;
border-width: 3px;
border-style: solid;
border-color: black;
width: 300px;
height: 140px;
}
.BtnStyle
{
width:100px;
height:30px;
margin-top:30px;
font-family:Sakkal Majalla;
font-size:18px;
}
.LblStyle
{
font-family:Sakkal Majalla;
font-size:20px;
} </style></head><body><form id="form1" runat="server"><cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></cc1:ToolkitScriptManager> <script language="javascript" type="text/javascript">
//Function to Hide ModalPopUp
function Hidepopup() {$find('ModalPopupExtender1').hide();
}
//Function to Show ModalPopUp
function Showpopup() {$find('ModalPopupExtender1').show();
}</script><div id="MainFields" runat="server"><table id="MainTable" runat="server" width="100%" ><tr><td><asp:Image ID="Image3" runat="server" Width="275px" Height="125px"
ImageUrl="~/Images/MurasalatLogo.png" /></td></tr></table> </div> <div><asp:Button ID="btnShowPopup" runat="server" Style="display:none" /><cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" X="900" Y="400" TargetControlID="btnShowPopup" PopupControlID="Panel1" BackgroundCssClass="modalBackground" ></cc1:ModalPopupExtender> <asp:Panel ID="pnlpopup" runat="server" CssClass="modalPopup" Style="display:none" ><table id="Tbl" runat="server" ><tr><td align="center"><asp:label ID="Lbl" runat="server" CssClass="LblStyle" Text="You can not forward the letter because the period finished. You can only make replying"></asp:label></td></tr><tr><td align="center" ><asp:Button ID="btnYes" runat="server" Text="OK" CssClass="BtnStyle" /> </td> </tr></table> </asp:Panel></div></form></body></html>The running result of the page after adding the object is shown on the link:
http://postimg.org/image/evj7cbhcx/
Second Problem: The X and Y properties of the ModalPopupExtender are not working. I tried to changes them three times with much different values, but the position of the pnlpopup are kept the same with no any change.
Third Problem:
When the Background is kept same before the pnlpopup and after appearence of the pnlpopup even that I set the modalpopupextender BackgroundCssClass property to be grey through assign it to modalbackground which set the background-color to grey as follow
.
.
<style type="text/css">
.modalBackground
{
background-color:Gray ;
}
.
.
.<cc1:ModalPopupExtender ID="ModalPopupExtender1" . . . BackgroundCssClass="modalBackground"....>
So Whete is the problem and what are the mistakes I made?