Using AJAX Control Toolkit Color Picker Control in Modal Popup Extender in ASP.Net

Hi ahmadsubuhanl...,

Refer below sample code.

HTML

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="mpe" BehaviorID="mpe" runat="server"
    PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground"
    CancelControlID="btnHide">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
    <div class="header">
        Modal Popup
    </div>
    <div class="body">
        <asp:TextBox ID="TextBox1" runat="server" Width="100px" />
        <asp:Button ID="Button1" runat="server" Text="Choose Color" />
        <cc1:ColorPickerExtender ID="ColorPicker1" runat="server"
            TargetControlID="TextBox1"
            SampleControlID="preview"
            PopupButtonID="Button1"
            PopupPosition="Right"
            OnClientColorSelectionChanged="Color_Changed" />
        <br />
        <div id="preview" style="width: 70px; height: 70px; border: 1px solid #000; margin: 0 3px; float: left"></div>
        <script type="text/javascript"> 
            function Color_Changed(sender) {
                sender.get_element().value = "#" + sender.get_selectedColor();
            }
        </script>
        <br />
        <asp:Button ID="btnHide" runat="server" Text="Hide Modal Popup" />
    </div>
</asp:Panel>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        mpe.Show();
    }
}

CSS

<style type="text/css">
    body { font-family: Arial; font-size: 10pt; }
    .modalBackground { background-color: Black; filter: alpha(opacity=60); opacity: 0.6; }
    .modalPopup { background-color: #FFFFFF; width: 300px; border: 3px solid #0DA9D0; padding: 0; }
    .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; font-weight: bold; margin-bottom: 5px; }
</style>

Screenshot