AutoCompleteExtender problems with ModalPopupExtender

If you've tried to use the AutoCompleteExtender inside a ModalPopupExtender, you'll notice that the autocomplete options show behind the modal popup. This is a Z-index problem in which the ModalPopupExtender overrides all other controls. If you check the modal's Z-index you'll see that it uses 100001 for its foreground element, so use something higher like 10000001.

<cc1:AutoCompleteExtender ID="ace" runat="server" OnClientShown="ShowOptions">
</cc1:AutoCompleteExtender>

<script language="javascript" type="text/javascript">
    function ShowOptions(control, args) {
        control._completionListElement.style.zIndex = 10000001;
    }
</script>
 
So we use the OnClientShown property which will call a javascript function to change the AutoCompleteExtender's Z-index when it kicks in.