Create A Popup Box In Telerik Controls

Here are some steps to create a popup box in Telerik Controls.

CSS

<styletype="text/css">
.Main
{
    width: 100%;
}

.HeadTitle
{
    width: 100%;
    height: 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-transform: capitalize;
    color: #333333;
    margin: 0pxauto;
    padding: 5px;
}

.TitleColor
{
    width: 100%;
    height: 32px;
    background-color: #006699;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    text-transform: capitalize;
    color: #FFFFFF;
    padding: 5px;
}

.Clear
{
    clear: both;
}

.ControlDesign
{
    width: 100%;
    height: auto;
    padding: 5px;
}

.auto-style1
{
    height: 25px;
}

.auto-style2
{
    width: 137px;
}

.auto-style3
{
    width: 4px;
}

.auto-style4
{
    height: 25px;
    width: 170px;
}

.auto-style5
{
    width: 170px;
}

.auto-style6
{
    height: 25px;
    width: 4px;
}

.auto-style7
{
    height: 25px;
    width: 137px;
}

.auto-style9
{
    height: 25px;
    width: 130px;
}

.auto-style10
{
    width: 130px;
}

.auto-style11
{
    height: 25px;
    width: 33px;
}

.auto-style12
{
    width: 33px;
}

.auto-style13
{
    width: 4px;
}

.auto-style14
{
    height: 25px;
    width: 4px;
}

.auto-style15
{
    width: 3px;
}

.auto-style16
{
    width: 207px;
}

.auto-style17
{
    width: 449px;
}
.TopRight
{
    width: 235px;
    float: right;
    margin-bottom: 10px;
}
</style>

Design:

<telerik:RadWindowTitle="Job Line" ID="RadWindow1" runat="server" Height="500px" Width="950px">
    <ContentTemplate>
        <div class="TitleColor">
            <asp:LabelID="Label6" runat="server" Text="Job Line Details"></asp:Label>
                </div>
                <div class="ControlDesign">
                    <table style="width: 100%;">
                        <tr>
                            <td class="auto-style5"> </td>
                                <td class="auto-style3"> </td>
                                    <td> </td>
                                    <td> </td>
                        </tr>
                        <tr>
                            <td class="auto-style5">Skill Group</td>
                                <td class="auto-style3">:</td>
                                    <td>
                                        <telerik:RadDropDownListID="RadDropDownList4" runat="server" Width="200px">
                                            </telerik:RadDropDownList>
                                    </td>
                                    <td> </td>
                        </tr>
                        <tr>
                            <td class="auto-style5"> </td>
                                <td class="auto-style3"> </td>
                                    <td> </td>
                                    <td> </td>
                        </tr>
                        <tr>
                            <tdc lass="auto-style5">Skill</td>
                                <td class="auto-style3">:</td>
                                    <td>
                                        <telerik:RadComboBoxID="RadComboBox2" runat="server" Width="200px">
                                            </telerik:RadComboBox>
                                    </td>
                                    <td> </td>
                        </tr>
                        <tr>
                            <td class="auto-style5"> </td>
                                <td class="auto-style3"> </td>
                                    <td> </td>
                                    <td> </td>
                        </tr>
                        </table>
                        <table style="width: 100%;">
                            <tr>
                                <td class="auto-style5"> </td>
                                    <td> </td>
                                    <td class="auto-style16"> </td>
                                        <td> </td>
                                        <td class="btn"> </td>
                                            <td> </td>
                                            <td> </td>
                                            <td> </td>
                            </tr>
                            <tr>
                                <td class="auto-style5">Requested Date of Hiring</td>
                                    <td>:</td>
                                    <td class="auto-style16">
                                        <telerik:RadDatePickerID="RadDatePicker4" runat="server" Width="207px">
                                            </telerik:RadDatePicker>
                                            </td>
                                            <td> </td>
                                            <tdclass="btn">No of Position</td>
                                                <td>:</td>
                                                <td>
                                                    <telerik:RadTextBoxID="RadTextBox10" runat="server" Width="200px">
                                                        </telerik:RadTextBox>
                                                </td>
                                                <td> </td>
                            </tr>
                            <tr>
                                <td class="auto-style5"> </td>
                                    <td> </td>
                                    <td class="auto-style16"> </td>
                                        <td> </td>
                                        <td class="btn"> </td>
                                            <td> </td>
                                            <td> </td>
                                            <td> </td>
                            </tr>
                            <tr>
                                <td class="auto-style5">Notes</td>
                                    <td>:</td>
                                    <td colspan="5">
                                        <telerik:RadTextBoxID="RadTextBox11" runat="server" Width="540px" Height="50px" TextMode="MultiLine">
                                            </telerik:RadTextBox>
                                            </td>
                                            <td> </td>
                            </tr>
                            <tr>
                                <td class="auto-style5"> </td>
                                    <td> </td>
                                    <td class="auto-style16"> </td>
                                        <td> </td>
                                        <td class="btn"> </td>
                                            <td> </td>
                                            <td> </td>
                                            <td> </td>
                            </tr>
                            <tr>
                                <td class="auto-style5">Comments</td>
                                    <td>:</td>
                                    <td colspan="5">
                                        <telerik:RadTextBoxID="RadTextBox12" runat="server" Width="540px" Height="50px" TextMode="MultiLine">
                                            </telerik:RadTextBox>
                                            </td>
                                            <td> </td>
                            </tr>
                            <tr>
                                <td class="auto-style5"> </td>
                                    <td> </td>
                                    <tdcolspan="5"> </td>
                                        <td> </td>
                            </tr>
                            <tr>
                                <td class="auto-style5"> </td>
                                    <td> </td>
                                    <td colspan="5">
                                        <telerik:RadButtonID="BtnCancel" runat="server" Text="Cancel" Width="100px">
                                            </telerik:RadButton>
                                            <telerik:RadButtonID="BtnReset" runat="server" Text="Reset" Width="100px">
                                                </telerik:RadButton>
                                                <telerik:RadButtonID="BtnSave" runat="server" BackColor="#0066FF" Text="Save" Width="100px">
                                                    </telerik:RadButton>
                                                    </td>
                                                    <td> </td>
                            </tr>
                            <tr>
                                <td class="auto-style5"> </td>
                                    <td> </td>
                                    <td colspan="5"> </td>
                                        <td> </td>
                            </tr>
                            <tr>
                                <td class="auto-style5"> </td>
                                    <td> </td>
                                    <td colspan="5"> </td>
                                        <td> </td>
                            </tr>
                            </table>
                            </div>
    </ContentTemplate>
    </telerik:RadWindow>

At the Button Click

protected void BtnAddJobLine_Click(object sender, EventArgs e)
{
    string script = "function f(){$find(\"" + RadWindow1.ClientID + "\").show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
    ScriptManager.RegisterStartupScript(this, this.GetType(), "key", script, true);
}

protected void BtnCancel_Click(object sender, EventArgs e)
{
    string script = "function f(){$find(\"" + RadWindow1.ClientID + "\").close(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
    ScriptManager.RegisterStartupScript(this, this.GetType(), "key", script, true);
}