• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3122
  • Last Modified:

ASP.NET window.showModalDialog change parent window background color

How can I change the background of the parent window when I use the window.showModalDialog to open a modal pop up in a datalist? Somewhat similar to what the ASP.NET AJAX Modal Popup extender provides. I have provided code snippets below.

Thank you
<script language ="javascript" type ="text/javascript">
 
function ShowModalWindow(Id)
                  {
                        window.showModalDialog("photo-gallery.aspx?gid="+ Id +"","","status:no;dialogWidth:800px;dialogHeight:570px;help:no;center:yes;resizable:no;scroll:yes;status:no;");
                  }
</script>
 
<asp:DataList ID="dtlgalleries"
   OnItemDataBound="dtlgalleries_ItemDataBound"	
   BorderStyle="Solid" 
   BorderWidth="1px"  
   runat="server"  
   RepeatColumns="4" 
   RepeatDirection="Horizontal" 
   Width="700px" 
   DataKeyField="Gallery_ID" 
   AllowPaging="True"
   AllowCustomPaging="True"
   PageSize="4"
   PagerStyle-Visible="False">
                <ItemTemplate>
                
                    <p class="photo_cover"><br /><asp:LinkButton ID="LinkButtonImg" runat="server" Text=''><img style="border-width:2px; border-style:solid; border-color:#666666;" alt="" src="images/gallery/thumb/<%# Eval("Gallery_Image") %>" /></asp:LinkButton></p>
                    <p class="photos_title"><asp:LinkButton ID="LinkButtonTxt" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Gallery_Caption") %>'></asp:LinkButton><br />[# of Slides: <%# Eval("PhotoCount") %>]</p>               
                                
                </ItemTemplate>
                <ItemStyle VerticalAlign="Top" />
            </asp:DataList>  
 
 
Sub dtlgalleries_ItemDataBound(ByVal sender As Object, ByVal e As DataListItemEventArgs)
        Dim btn, btnImg As LinkButton
        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
            btn = CType(e.Item.FindControl("LinkButtonTxt"), LinkButton)
            btnImg = CType(e.Item.FindControl("LinkButtonImg"), LinkButton)
 
            If DataBinder.Eval(e.Item.DataItem, "PhotoCount") > 0 Then
                btnImg.Attributes.Add("onclick", "ShowModalWindow('" & DataBinder.Eval(e.Item.DataItem, "Gallery_Id") & "')")
                btn.Attributes.Add("onclick", "ShowModalWindow('" & DataBinder.Eval(e.Item.DataItem, "Gallery_Id") & "')")
            End If
 
            '<a href='#' onclick = "ShowModalWindow('<%# DataBinder.Eval(Container.DataItem,"Gallery_Id") %>');"><%# Eval("Gallery_Caption") %>
 
 
        End If
    End Sub

Open in new window

0
DeMyu
Asked:
DeMyu
  • 3
  • 2
1 Solution
 
Shyam_SarafCommented:
Try this --

function ShowModalWindow(Id)
                  {

document.bgColor='#CCCC99'; // change the colur combination of your choice
                        window.showModalDialog("photo-gallery.aspx?gid="+ Id +"","","status:no;dialogWidth:800px;dialogHeight:570px;help:no;center:yes;resizable:no;scroll:yes;status:no;");
                  }


0
 
DeMyuAuthor Commented:
I'm afraid that will only change the background of the child window. I will like to change the background of the parent window on popup and to revert it back to its original state on closing the child window.

Thank you.
0
 
prairiedogCommented:
1. If you want to change the background color of the parent window, then you will need to use window.open method. This method will give you a handler to the parent window, but window.showModalDialog will not give you the handler and you cannot connect to the parent window through the child window.
2. Even you can change the parent window when the child window is popped up, it is impossible to change the background color of the parent window back to the previous window. The reason is simple: user can close the child window by clicking the "X" button of the child window, which will not be detected by your code.
Anyway, to change the parent window's background color, change
window.showModalDialog(....)
To
window.open(...)
Then in your child window, create a JavaScript function like this:

<script type="text/javascript">
function checkParent()
{
var par = window.parent.opener;
if (par != null)
{
par.document.bgColor="#000000"; /* Change the background of the parent window to black */
}
}
</script>
Add the function call in <body onload="checkParent()">  of the child window.
Again, above code is just to change the background color of a parent window. If you want to simulate the behavior of ModalPopupExtender, then you cannot use this approach.
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
DeMyuAuthor Commented:
It appears that the window.showModalDialog does not meet my requirements. How can I use the ModalPopupExtender such that it pops up a window based on the id passed to it? I have read numerous articles on the ModalPopupExtender but yet to see an example that works for me.

Your assistance is appreciated.

DeMuy
0
 
prairiedogCommented:
I worte an article on EE to explain how to use AJAX ModalPopupExtender with GridView. It can also be applied to DataList because the principle is the same. http://beta.experts-exchange.com/articles/Programming/Languages/.NET/ASP.NET/Use-AJAX-ModalPopupExtender-in-GridView-or-other-data-controls.html
Let me know if you have any questions on this article and need further help on this question.
0
 
DeMyuAuthor Commented:
I am taking a look at your article and trying to implement a solution that is similar to what you have suggested in the article.

Thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now