Issue with modalpopupextender When Using in a a Web Form with master Page

Question

User1769015664 posted

The following code works fine when it is in a web form, but, it doesn't work if I have it on a form with master Page. I get a Null reference error on the highlighted line below.

<link href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 
<style type="text/css">
 .ModalPopupBG
{
    background-color: #666699;
    filter: alpha(opacity=50);
    opacity: 0.7;
}

.HellowWorldPopup
{
    min-width:200px;
    min-height:150px;
    background-color:burlywood;
    border-width: 3px;
    border-style: solid;
    border-color: brown;
}
.PopupHeader
{
    background:green;
    background-color:navy;
    color:yellow;
}
</style>
<script>
    function onModalOk()
    {
        document.getElementById("TextBox2").innerText = document.getElementById('TextBox1').innerText; 
        document.getElementById("TextBox3").innerText = $("#ddlEmp option:selected").text();
    }
    </script>

  <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

        <asp:button id="Button1" runat="server" text="Button" />

        <ajaxToolkit:modalpopupextender id="ModalPopupExtender1" runat="server" 
            OnOkScript="onModalOk();"
	        cancelcontrolid="btnCancel" okcontrolid="btnOkay" 
	        targetcontrolid="Button1" popupcontrolid="Panel1" 
	        popupdraghandlecontrolid="PopupHeader" drag="true" 
	        backgroundcssclass="ModalPopupBG">
        </ajaxToolkit:modalpopupextender>

        <asp:panel id="Panel1" style="display: none" runat="server">
	        <div class="HellowWorldPopup">
                <div class="PopupHeader" id="PopupHeader">People Search</div>
            <div class="popup_Body">
                <p>Enter you name:
                    <asp:textbox id="TextBox1" runat="server"  AutoCompleteType="Disabled"></asp:textbox>
                    
                </p>
                <p>
                    <asp:Label ID="lblCompany" runat="server" Text="Company:"></asp:Label>
                    <asp:DropDownList ID="ddlEmp" runat="server" AutoPostBack="true">
                        <asp:ListItem Text="Company1" Value="1"></asp:ListItem>
                          <asp:ListItem Text="Company2" Value="2"></asp:ListItem>
                    </asp:DropDownList>
                </p>
            </div>
                <div class="Controls">
                    <input id="btnOkay" type="button" value="Done" />
                    <input id="btnCancel" type="button" value="Cancel" />
		        </div>
             </div>

        </asp:panel>