The solution of it is using FindControl in child page to bind TargetControlID on ModalPopup dynamically. But I don't think it is a convenient way.
Here, I suggest you use client behavior method to achieve it.
MasterPage:
<head runat="server">
<title></title>
<style>
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=0);
opacity: 0;
}
.modalPopup
{
background-color: #ffffdd;
border-width: 3px;
border-style: solid;
border-color: Gray;
padding: 3px;
width: 250px;
}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<ajaxtoolkit:toolkitscriptmanager runat="Server" id="ScriptManager1" >
</ajaxtoolkit:toolkitscriptmanager>
<script type="text/javascript">
function showPopup() {
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.show();
}
function hidePopup() {
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.hide();
}
</script>
<asp:Button runat="server" ID="hiddenTargetControlForModalPopup" style="display:none"/>
<ajaxtoolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup"
BehaviorID="programmaticModalPopupBehavior"
TargetControlID="hiddenTargetControlForModalPopup"
PopupControlID="programmaticPopup"
BackgroundCssClass="modalBackground"
DropShadow="True"
RepositionMode="RepositionOnWindowScroll" >
</ajaxtoolkit:ModalPopupExtender>
<asp:Panel runat="server" CssClass="modalPopup" ID="programmaticPopup" style="background-color:##FFFFCC;display:none;height:125px;width:225px;padding:10px">
I'm the ModalPopup in MasterPage
<input id="Button1" type="button" value="OK" onclick="hidePopup()" />
</asp:Panel>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
<title></title>
<style>
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=0);
opacity: 0;
}
.modalPopup
{
background-color: #ffffdd;
border-width: 3px;
border-style: solid;
border-color: Gray;
padding: 3px;
width: 250px;
}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<ajaxtoolkit:toolkitscriptmanager runat="Server" id="ScriptManager1" >
</ajaxtoolkit:toolkitscriptmanager>
<script type="text/javascript">
function showPopup() {
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.show();
}
function hidePopup() {
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.hide();
}
</script>
<asp:Button runat="server" ID="hiddenTargetControlForModalPopup" style="display:none"/>
<ajaxtoolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup"
BehaviorID="programmaticModalPopupBehavior"
TargetControlID="hiddenTargetControlForModalPopup"
PopupControlID="programmaticPopup"
BackgroundCssClass="modalBackground"
DropShadow="True"
RepositionMode="RepositionOnWindowScroll" >
</ajaxtoolkit:ModalPopupExtender>
<asp:Panel runat="server" CssClass="modalPopup" ID="programmaticPopup" style="background-color:##FFFFCC;display:none;height:125px;width:225px;padding:10px">
I'm the ModalPopup in MasterPage
<input id="Button1" type="button" value="OK" onclick="hidePopup()" />
</asp:Panel>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
Child Page:
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:Button ID="Button1" runat="server" Text="I'm a Button in child page" OnClientClick="showPopup();return false;" />
</asp:Content>
<asp:Button ID="Button1" runat="server" Text="I'm a Button in child page" OnClientClick="showPopup();return false;" />
</asp:Content>
10 comments:
Good idea!! thanks!!
By total luck I tried using the ContentPlaceHolderID:controlID and it pops. I just can't figure out how to make the background grey out.
To shg:
There is a css class you can define the style to make the background grey out. It is just an absolute position DIV.
thanks for your opinion but, when we assign var with BehaviorID it gives javascript error found null value then i tried .
$find('ModulPop').show();
it works .
To Mayank:
Please define correct BehaviorID property for ModalPopup, and assign it with $find method.
Hello.
Thanks for your greate exsample, you saved me.
But now I have a Problem, when click my button i've got the next error: "Object Required ScriptResource.axd" and don't work...
have any idea?
Vince Xu,
Very good example of MasterPage - implemented modal pop-out. Thank you for your work.
Ilarious: Make sure that you've installed the AJAX toolkit, and have the correct version of the toolkit. You may want to test with Firebug for FF.
Also, the background color may not appear because the sample has an invalid hex color code (should be 3 or 6 hex letters/numbers).
almost 2 years and works, thanks a lot
To Mayank:
Might be you are using same code in master pages. So for that you can check the link:http://niitdeveloper.blogspot.com/2010/09/how-to-use-javascript-with-master-pages.html
Great post :)
Was trying to identify a way that would give me the following behavior.
A modalpopupextender in master-child scenario which covers the whole browser; infact the content of master page even.
Kudos!!!!!
Post a Comment