This week I got to play with some of the controls in the AJAX Control Toolkit, specifically the Modal Popup Extender. I hadn’t gotten a chance to sink my teeth into anything AJAX so I was pretty excited to see what it offers. On my current project I’m building custom web parts for a SharePoint application being used on limited size screens (think 800×600). As such we need to be very resourceful with screen real estate and limit the number of page changes.
The Modal Popup Extender sounded like a great fit for popping up additional entry forms without causing the user to navigate away from the primary entry screen. As many people who have attempted to implement the Modal Popup Extender on SharePoint can attest (example 1 & example 2) there are compatibility issues with properly viewing the popup. I quickly ran into some of those issues with the pop up not appearing at the X and Y coordinates specified, the background CSS wasn’t properly rendered, or a host of other errors. I added the below DOCTYPE tag to the master page as suggested by many people.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Adding the DOCTYPE did help rendering the modal popup, but I began to see errors rendering out of the box SharePoint controls. As I wasn’t willing to sacrifice out of the box controls for the modal popup extender, we began to search for alternatives.
I quickly found an example offered on a forum, but the formatting and implementation were not very clean or well suited to my needs. I decided to clean up the code and below is what resulted. Now we have a modal popup box with disabled background functioning through a web part.
Add the first control which will be the darkened background panel.
private Panel ModalBackgroundPanelControl()
{
// panel will hold modal popup items
Panel pnlModal = new Panel();
pnlModal.ID = "pnlModal";
pnlModal.Style["display"] = "none";
pnlModal.Style["position"] = "absolute";
pnlModal.Style["left"] = "0px";
pnlModal.Style["top"] = "0px";
pnlModal.Style["z-index"] = "9";
pnlModal.Style["background-color"] = "#383838";
pnlModal.Style["filter"] = "alpha(opacity=60)";
return pnlModal;
}
Add the second control which will be the modal popup panel. This panel contains an update panel which will house some controls of its own (buttons, textboxes, inputs, etc). I place all but the OK button inside this update panel since we want only the OK button to perform a postback (which resets the modal popup) and the other input controls to maintain the modal popup.
private Panel ModalSelectStoresPanelControl()
{
Panel pnlSelectStores = new Panel();
pnlSelectStores.ID = "pnlSelectStores";
pnlSelectStores.Style["display"] = "none";
pnlSelectStores.Style["position"] = "absolute";
pnlSelectStores.Style["left"] = "250px";
pnlSelectStores.Style["top"] = "25px";
pnlSelectStores.Style["z-index"] = "10";
pnlSelectStores.Style["background-color"] = "#FFFFFF";
// add update panel so that interior controls added don't perform postback
// update panel contains its own controls for program logic
pnlSelectStores.Controls.Add(ModalSelectStoresUpdatePanelControl());
// add OK button control
pnlSelectStores.Controls.Add(AcceptChangesButtonControl());
return pnlSelectStores;
}
Lastly is a “Select Stores” button which will fire off the modal popup. Note the Javascript event handler which essentially sets the display attribute to none or showing (block).
private Button SelectStoresButtonControl()
{
Button btnSelectStores = new Button();
btnSelectStores.ID = "btnSelectStores";
btnSelectStores.Text = "Select Stores";
// get reference to the client id for popup panels
string modalPanelClientId = ((Panel)this.FindControl("pnlModal")).ClientID;
string selectStoresPanelClientId = ((Panel)this.FindControl("pnlSelectStores")).ClientID;
btnSelectStores.Click += new EventHandler(SelectStoresButtonClicked);
// set onclick event so that popups display and resize to fit screen
btnSelectStores.Attributes.Add("onClick", "javascript:document.getElementById('" + modalPanelClientId + "').style.width = document.body.clientWidth + 'px';document.getElementById('" + modalPanelClientId + "').style.height = document.body.clientHeight + 'px';document.getElementById('" + modalPanelClientId + "').style.display='block';document.getElementById('" + selectStoresPanelClientId + "').style.display='block';");
return btnSelectStores;
}
Screenshots of the popup in action. You can see that the popup contains a number of additional controls not shown above in my code.
There is one drawback that I haven’t yet overcome. Currently my code resizes the background panel to be the size of the internet browser window. If the user resizes the window or if the popup content extends beyond that size then the user can edit items in the newly extended area. I will look into disabling resizing and scroll bars, but that doesn’t fully remove the problems. If you have suggestions for overcoming those issues please feel free to share.
The Frog Pond of Technology 
Originally posted on: https://briantjackett.com/archive/2009/05/27/an-alternative-for-the-modal-popup-in-sharepoint-2007.aspx#476560Hi,Thanks for the post. Is there browser issues? i.e. Does this solutions works for FireFox 3.0 and IE browsers?Thanks-Hari
LikeLike
Originally posted on: https://briantjackett.com/archive/2009/05/27/an-alternative-for-the-modal-popup-in-sharepoint-2007.aspx#476596Hari, Since this is development for Windows SharePoint Services 3.0 without Service Pack 2 applied I focused development primarily on IE 8 in compatibility view mode (essentially IE 7) to match our end users. I had not tested on FireFox during development. I just checked with FireFox 3.0.8 and I see that it is not fully compatible. The modal popup will display, but unfortunately the processing of button clicks and the transparency effects of the background do not work as intended. Hopefully this answers your question, let me know if it doesn’t.I will mention that Service Pack 2 for WSS 3 and MOSS 2007 is supposed to improve browser compatible for level 2 browsers (FireFox, Safari, etc). Perhaps with that applied you will get different results. We are planning on rolling out SP2 in our development environments in the coming months. I will update my post if I find new results.
LikeLike
Originally posted on: https://briantjackett.com/archive/2009/05/27/an-alternative-for-the-modal-popup-in-sharepoint-2007.aspx#477466Can you post all of the code there are a bunch of controls I can’t seem to find in you snippits?ModalSelectStoresUpdatePanelControl?AcceptChangesButtonControl?
LikeLike
Originally posted on: https://briantjackett.com/archive/2009/05/27/an-alternative-for-the-modal-popup-in-sharepoint-2007.aspx#477738Scott, Sorry for the delay in responding, I was out of town the past few days. Unfortunately I can’t post all of the code as this code was developed at a client site and for legal reasons I don’t “own” the code. The methods you listed are simplying functions returning a .net control (UpdatePanel and Button respectively) that make up the primary content for the modal popup. The panel contains a number of textboxes and listboxes for making selections while the accept button has a click event that handles saving the information in the varoius fields of the panel. If you’d like me to provide stubbed out functions I can do so, but the funtionality is very basic in declaring a .net control and returning that. Let me know and thanks for reading.
LikeLike
Originally posted on: https://briantjackett.com/archive/2009/05/27/an-alternative-for-the-modal-popup-in-sharepoint-2007.aspx#477883Like your example however finding it difficult to implement with a refresh panel. When the modal panels are added to the refresh panel the modal functionality works momentarily until the refresh panel finishes with the postback. If I add the modal panels outside of the refresh panel they do not appear at all. I beleive my issue is not fully understanding the refresh panel but if you have time any help would be appreciated.
LikeLike
Originally posted on: https://briantjackett.com/archive/2009/05/27/an-alternative-for-the-modal-popup-in-sharepoint-2007.aspx#478059Chris M, To give you a little background into the architecture, I have a mix of Panels and UpdatePanels contained on the current version of my web part. I have 2 Panels that comprise the modal popup, one is the background grayed out portion and the other is the foreground “popup”. The foreground popup then contains 3 primary pieces: accept button, cancel button (not included in my above example), and an update panel. One thing to be aware of is that javascript is being called to display the modal popup and background panels. Therefore a postback of the page will cause them to disappear (return to initial state.) The purpose of the cancel button is to call javascript that simply hides (set display to ‘none’) for the popup panel. For performance reasons I encapsulate the cancel button in an updatepanel so it doesn’t cause a postback. The accept button can have a click event, but really it only needs to cause a postback in my scenario which then triggers other custom code to fire causing the save of data. The last piece is the updatepanel containing all of the controls that comprise my form (listboxes, buttons, and textboxes) for selecting an address. Since I am including buttons on that form I need to encapsulate it in an updatepanel so that no postbacks occur. Instead I use some lengthy javascript in the onClick event of the buttons to handle the selection and formatting of my address choices. Hopefully this gives you a little insight into the structure of my design. If you’d like further help let me know and I’d be glad to shoot you an email. Thanks for the feedback.
LikeLike
Originally posted on: https://briantjackett.com/archive/2009/05/27/an-alternative-for-the-modal-popup-in-sharepoint-2007.aspx#482696HiI want you to post all of the code of these two methods: ModalSelectStoresUpdatePanelControl?AcceptChangesButtonControl?pleaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaase !
LikeLike
Originally posted on: https://briantjackett.com/archive/2009/05/27/an-alternative-for-the-modal-popup-in-sharepoint-2007.aspx#482780Azumir, As I said in a comment above I’m not able to post all of the source code as it comes from a client engagement I’m working on. The two functions that you mentioned are fairly straightforward though. ModalSelectStoresUpdatePanelControl returns a DataTable control (wrapped in an UpdatePanel) that contains the ListBoxes, Labels, and TextBoxes that you see in the in the last picture making up my addressing form. The AcceptChangesButtonControl method returns a Button control with an event handler for clicking the button. The event handler saves off any data filled out in my addressing form to a custom SharePoint list. I hope this gives you a start for how to create the content to fill your pop up. Let me know if you have any additional questions.
LikeLike
Originally posted on: https://briantjackett.com/archive/2009/05/27/an-alternative-for-the-modal-popup-in-sharepoint-2007.aspx#482879Ok i see,but i have another problem with the accept button: i mean that when i click the accept button nothing happen. when i tried to use another control in the panel like treeview the same problem persist (when i choice a node the postback event does’t work).Thanks for all.
LikeLike
Originally posted on: https://briantjackett.com/archive/2009/05/27/an-alternative-for-the-modal-popup-in-sharepoint-2007.aspx#482919Azumir, Make sure your button control isn’t placed within an UpdatePanel (can prevent postback) or that you don’t have any custom javascript disabling the postback (such as “return null.” You’ll also want to assign an eventhandler to your Click event (button.Click += …). If you want to send me a snippet of your code I can check it over. My email is brian.jackett@gmail.com. Let me know if that helps.
LikeLike
Originally posted on: https://briantjackett.com/archive/2009/05/27/an-alternative-for-the-modal-popup-in-sharepoint-2007.aspx#496759I have a Hyperlink in List ,When click on link , have to populate the Modal Popupplease send some code for thisThanks & regardsNarasimha
LikeLike
Originally posted on: https://briantjackett.com/archive/2009/05/27/an-alternative-for-the-modal-popup-in-sharepoint-2007.aspx#496814Narasimha, Typically you use a Hyperlink control to redirect a user to a different URL, not for running custom code or logic on your page. You may want to look into using a Button control with an event handler such as the example in my code above. You would use something likebutton.Click += new EventHandler(button_Clicked)// inside event handler{myTextbox.Text = “some value”;}Let me know if that helps.
LikeLike
Originally posted on: https://briantjackett.com/archive/2009/05/27/an-alternative-for-the-modal-popup-in-sharepoint-2007.aspx#545515Hello! I send you a Email.I really need your help.Thanks.
LikeLike