In my SharePoint site I use modal dialog boxes (Fancybox, actually) to display content. In one of these dialog boxes is a PeopleEditor SharePoint control which (when you browse for a person) opens up another dialog box! Unfortunately this dialog box is created in the ‘parent’ DOM and not the page that is open in the Fancybox dialog (which is actually displaying content using an IFrame), so the SharePoint PeopleEditor dialog is hidden behind the modal dialog. The PeopleEditor dialog box also gets displayed underneath my Fancybox dialog, and is generated on the fly! So I needed to ensure that it displayed above my Fancybox dialog. I did this using jQuery:
Using my PeopleEditor control:
<SharePoint:PeopleEditor ID="requesterPE" Width="350px" AllowEmpty="true" ValidatorEnabled="true" AllowTypeIn="true" MultiSelect="false" SelectionSet="User" runat="server" MaximumEntities="1" />
I got hold of the ‘Browse’ button that gets generated in the DOM, and added to the click event like so:
$("#<%=requesterPE.ClientID%>_browse").click(
function ()
{
var checkExist = setInterval(
function ()
{
if ($(".ms-dlgContent", top.document).length)
{
$(".ms-dlgContent", top.document).css("z-index", '9999');
clearInterval(checkExist);
}
}, 100); // check every 100ms
});What this does is loop every 100 milliseconds until the PeopleEditor dialog box (with a class name of ms-dlgContent) in the parent window (top.document) is created, and then it changes the z-index order to something higher than my Fancybox (9999). Voila!