[Solved] jQuery Select2 DropDownList is disabled inside Modal Popup with MasterPage

hi,

How running select2 DropDownList in modal popup with used masterpage file.

problem when modal popup display DropDownList can't click (disabled) 

sample code like this:

<%@ Page Language="vb" MaintainScrollPositionOnPostback="true" MasterPageFile="~/form/MasterPage.master" Title="" ValidateRequest="false" AutoEventWireup="false" CodeBehind="WebForm6.aspx.vb" Inherits="payroll.WebForm6" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="Content1" runat="server"
    ContentPlaceHolderID="ContentPlaceHolder4">
    <title>Untitled Page</title>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
        .modalBackground { background-color: Black; filter: alpha(opacity=40); opacity: 0.4; }
        .modalPopup { background-color: #FFFFFF; width: 460px; border: 3px solid #0DA9D0; }
        .modalPopup .header { background-color: #2FBDF1; height: 30px; color: White; line-height: 30px; text-align: center; font-weight: bold; }
        .modalPopup .body { min-height: 50px; line-height: 30px; text-align: center; padding: 5px; }
        .modalPopup .footer { padding: 3px; }
        .modalPopup .button { height: 23px; color: White; line-height: 23px; text-align: center; font-weight: bold; cursor: pointer; background-color: #9F9F9F; border: 1px solid #5C5C5C; }
        .modalPopup td { text-align: left; }
        .form-control { width: 200px !important; }
        .select2-selection__rendered { font-size: small !important; }
        .select2-results__option { font-size: large !important; }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".js-example-placeholder-single").select2({
                placeholder: "Select",
                allowClear: true,
                dropdownParent: $('#pnlPopup'),
                width: 200
            });
        });
    </script>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:LinkButton Text="" ID="lnkFake" runat="server" />
    <cc1:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlPopup" TargetControlID="lnkFake"
        CancelControlID="btnClose" BackgroundCssClass="modalBackground">
    </cc1:ModalPopupExtender>
    <asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" align="center" Style="display: !none">
        <div class="header">
            New Loan
        </div>
        <div class="body">
            <table border="0" width="450" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <asp:Label ID="Label7" runat="server" Font-Names="Calibri" Font-Size="Smaller" Style="text-align: right"
                            Text="Jenis Pinjaman:"></asp:Label>
                    </td>
                    <td width="10">&nbsp;
                    </td>
                    <td style="text-align: left">
                        <asp:DropDownList ID="ddlCustomers" runat="server"
                            CssClass="js-example-placeholder-single" Width="200px">
                            <asp:ListItem Text="--Select Customer--" Value="0" />
                            <asp:ListItem Text="John Hammond" Value="1" />
                            <asp:ListItem Text="Mudassar Khan" Value="2" />
                            <asp:ListItem Text="Suzanne Mathews" Value="3" />
                            <asp:ListItem Text="Robert Schidner" Value="4" />
                        </asp:DropDownList>
                    </td>
                </tr>
            </table>
        </div>
        <div class="footer" align="right">
            <asp:Button ID="btnClose" runat="server" CssClass="button button3" Text="Close" ToolTip="Close" />
            <asp:Button ID="Button3" runat="server" Text="Save" ToolTip="Save" CssClass="button button2" />
        </div>
    </asp:Panel>
    <asp:Button ID="Button4" runat="server" Text="Button" />
</asp:Content>