Solved

ASP.NET window.showModalDialog change parent window background color

Posted on 2009-04-04
9
2,963 Views
Last Modified: 2012-05-06
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
Comment
Question by:DeMyu
  • 3
  • 2
9 Comments
 
LVL 1

Expert Comment

by:Shyam_Saraf
ID: 24070339
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
 

Author Comment

by:DeMyu
ID: 24072986
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
 
LVL 22

Expert Comment

by:prairiedog
ID: 24091757
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:DeMyu
ID: 24092338
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
 
LVL 22

Accepted Solution

by:
prairiedog earned 500 total points
ID: 24099400
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
 

Author Comment

by:DeMyu
ID: 24119025
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

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This document covers how to connect to SQL Server and browse its contents.  It is meant for those new to Visual Studio and/or working with Microsoft SQL Server.  It is not a guide to building SQL Server database connections in your code.  This is mo…
A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …
Need to grow your business through quality cloud solutions? With everything required to build a cloud platform and solution, you may feel like the distance between you and the cloud is quite long. Help is here. Spend some time learning about the Con…

929 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now