Searchable dropdown list goes behind the update panel when expanding

Question

I have a dropdown list with search feature inside an update panel. But when expanding the dropdown list it goes behind the update panel as in the screenshot. Seems like it is because of the opacity (BackgroundCssClass) of ModalPopupExtender. How can I solve this issue?

  <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
  <script type="text/javascript" src="DateTimePicker/jquery-1.8.3.min.js" charset="UTF-8"> 
  </script>
  <link href="Scripts/dropdownlist/select2.css" rel="stylesheet"/>
  <script src="Scripts/dropdownlist/select2.js"></script>

  <script type="text/javascript">
      $(document).ready(function () {
          $("#<%= DropDownList2.ClientID %>").select2();
      });
      </script>
     <style type="text/css">
       .modalBackground
       {
        background-color: Gray;
        filter: alpha(opacity=70);
        opacity: 0.7;
      }
    </style>
    </asp:Content>


    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
   <asp:ScriptManager ID="ScriptManager1" runat="server">
  </asp:ScriptManager>
       </br> 
   <asp:LinkButton ID="linkbtn_show" Style="margin-right: 15px" runat="server" class="lightbtnHyperlink-menu">
        New</asp:LinkButton>
<cc1:ModalPopupExtender ID="mp1" runat="server"   PopupControlID="Panl1addvehicle" TargetControlID="linkbtn_show"
     BackgroundCssClass="modalBackground"  >       
</cc1:ModalPopupExtender>
<asp:Panel ID="Panl1addvehicle" runat="server" Style="display: none"> 
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
              <table  style="border:Solid 16px #008080;height:400px;width:900px;padding:2px;text-align:left" align="center">
                  <tr><td>
               <asp:DropDownList ID="DropDownList2" runat="server" AppendDataBoundItems="true" 
                    AutoPostBack="true" Height="25px"  Width="188px" >
                     <asp:listitem text="Select Color"></asp:listitem>
            <asp:listitem text="Red"></asp:listitem>
            <asp:listitem text="Green"></asp:listitem>
            <asp:listitem text="Blue"></asp:listitem>
            <asp:listitem text="Pink"></asp:listitem>
            <asp:listitem text="Yellow"></asp:listitem>
            <asp:listitem text="Lime"></asp:listitem>  
                </asp:DropDownList></td></tr>
                  </table>                 
        </ContentTemplate>
    </asp:UpdatePanel>          
</asp:Panel>
</asp:Content>