Problems with modalpopup background click

Hi all

I have a problem with my modalpopup background click as i use javascript to find its background element and when it is clicked by the client's side, it will close the modalpopup. However, it is not working. I couldn't debug the javascript codes on the .aspx pages. And also, i feel that this is an important issue as i put my modalpopup in a Ajax Tabcontainer so i thought maybe it is the javascript that couldn't find the modalpopup behaviour ID. I tried a lot of differents methods to make it work but it doesn't

.aspx(javascript)

function onShown() {
var background = $find("MPE")._backgroundElement;
background.onclick = function () { $find("MPE").hide(); }
}

.aspx(panel that are supposed to pop up and modalpopup in Tabcontainer)

<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" VerticalStripWidth="200px"
Height="250px" ScrollBars="Vertical">

<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="Videos" CssClass="ajax__tab_header2"> ( This is the 2nd tab )

<asp:Panel ID="Panel1" runat="server" Width="700px">
<div align="center" style="margin-top:13px;">

<video id="videoTag" width="640" height="480" controls="controls" runat="server" behaviorid = "videoT" >
<source src="" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" >

  Your browser does not support the video tag.</video>

</div>
</asp:Panel> (Things that are supposed to pop up is in a panel)

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BehaviorID="MPE" TargetControlID="Button1" PopupControlID="Panel1" PopupDragHandleControlID="PopupHeader"
Drag="True" BackgroundCssClass="ModalPopupBG" DynamicServicePath="" Enabled="True">
</asp:ModalPopupExtender> 

</asp:TabPanel>

</asp:TabContainer>