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

Telerik

CSS

  1. <styletype="text/css">
  2. .Main
  3. {
  4. width: 100%;
  5. }
  7. .HeadTitle
  8. {
  9. width: 100%;
  10. height: 40px;
  11. font-family: Arial, Helvetica, sans-serif;
  12. font-size: 16px;
  13. font-weight: normal;
  14. font-style: normal;
  15. font-variant: normal;
  16. text-transform: capitalize;
  17. color: #333333;
  18. margin: 0pxauto;
  19. padding: 5px;
  20. }
  22. .TitleColor
  23. {
  24. width: 100%;
  25. height: 32px;
  26. background-color: #006699;
  27. font-family: Arial, Helvetica, sans-serif;
  28. font-size: 14px;
  29. font-weight: bold;
  30. font-style: normal;
  31. font-variant: normal;
  32. text-transform: capitalize;
  33. color: #FFFFFF;
  34. padding: 5px;
  35. }
  37. .Clear
  38. {
  39. clear: both;
  40. }
  42. .ControlDesign
  43. {
  44. width: 100%;
  45. height: auto;
  46. padding: 5px;
  47. }
  49. .auto-style1
  50. {
  51. height: 25px;
  52. }
  54. .auto-style2
  55. {
  56. width: 137px;
  57. }
  59. .auto-style3
  60. {
  61. width: 4px;
  62. }
  64. .auto-style4
  65. {
  66. height: 25px;
  67. width: 170px;
  68. }
  70. .auto-style5
  71. {
  72. width: 170px;
  73. }
  75. .auto-style6
  76. {
  77. height: 25px;
  78. width: 4px;
  79. }
  81. .auto-style7
  82. {
  83. height: 25px;
  84. width: 137px;
  85. }
  87. .auto-style9
  88. {
  89. height: 25px;
  90. width: 130px;
  91. }
  93. .auto-style10
  94. {
  95. width: 130px;
  96. }
  98. .auto-style11
  99. {
  100. height: 25px;
  101. width: 33px;
  102. }
  104. .auto-style12
  105. {
  106. width: 33px;
  107. }
  109. .auto-style13
  110. {
  111. width: 4px;
  112. }
  114. .auto-style14
  115. {
  116. height: 25px;
  117. width: 4px;
  118. }
  120. .auto-style15
  121. {
  122. width: 3px;
  123. }
  125. .auto-style16
  126. {
  127. width: 207px;
  128. }
  130. .auto-style17
  131. {
  132. width: 449px;
  133. }
  134. .TopRight
  135. {
  136. width: 235px;
  137. float: right;
  138. margin-bottom: 10px;
  139. }
  140. </style>
Design:
  1. <telerik:RadWindowTitle="Job Line" ID="RadWindow1" runat="server" Height="500px" Width="950px">
  2. <ContentTemplate>
  3. <div class="TitleColor">
  4. <asp:LabelID="Label6" runat="server" Text="Job Line Details"></asp:Label>
  5. </div>
  6. <div class="ControlDesign">
  7. <table style="width: 100%;">
  8. <tr>
  9. <td class="auto-style5"> </td>
  10. <td class="auto-style3"> </td>
  11. <td> </td>
  12. <td> </td>
  13. </tr>
  14. <tr>
  15. <td class="auto-style5">Skill Group</td>
  16. <td class="auto-style3">:</td>
  17. <td>
  18. <telerik:RadDropDownListID="RadDropDownList4" runat="server" Width="200px">
  19. </telerik:RadDropDownList>
  20. </td>
  21. <td> </td>
  22. </tr>
  23. <tr>
  24. <td class="auto-style5"> </td>
  25. <td class="auto-style3"> </td>
  26. <td> </td>
  27. <td> </td>
  28. </tr>
  29. <tr>
  30. <tdc lass="auto-style5">Skill</td>
  31. <td class="auto-style3">:</td>
  32. <td>
  33. <telerik:RadComboBoxID="RadComboBox2" runat="server" Width="200px">
  34. </telerik:RadComboBox>
  35. </td>
  36. <td> </td>
  37. </tr>
  38. <tr>
  39. <td class="auto-style5"> </td>
  40. <td class="auto-style3"> </td>
  41. <td> </td>
  42. <td> </td>
  43. </tr>
  44. </table>
  45. <table style="width: 100%;">
  46. <tr>
  47. <td class="auto-style5"> </td>
  48. <td> </td>
  49. <td class="auto-style16"> </td>
  50. <td> </td>
  51. <td class="btn"> </td>
  52. <td> </td>
  53. <td> </td>
  54. <td> </td>
  55. </tr>
  56. <tr>
  57. <td class="auto-style5">Requested Date of Hiring</td>
  58. <td>:</td>
  59. <td class="auto-style16">
  60. <telerik:RadDatePickerID="RadDatePicker4" runat="server" Width="207px">
  61. </telerik:RadDatePicker>
  62. </td>
  63. <td> </td>
  64. <tdclass="btn">No of Position</td>
  65. <td>:</td>
  66. <td>
  67. <telerik:RadTextBoxID="RadTextBox10" runat="server" Width="200px">
  68. </telerik:RadTextBox>
  69. </td>
  70. <td> </td>
  71. </tr>
  72. <tr>
  73. <td class="auto-style5"> </td>
  74. <td> </td>
  75. <td class="auto-style16"> </td>
  76. <td> </td>
  77. <td class="btn"> </td>
  78. <td> </td>
  79. <td> </td>
  80. <td> </td>
  81. </tr>
  82. <tr>
  83. <td class="auto-style5">Notes</td>
  84. <td>:</td>
  85. <td colspan="5">
  86. <telerik:RadTextBoxID="RadTextBox11" runat="server" Width="540px" Height="50px" TextMode="MultiLine">
  87. </telerik:RadTextBox>
  88. </td>
  89. <td> </td>
  90. </tr>
  91. <tr>
  92. <td class="auto-style5"> </td>
  93. <td> </td>
  94. <td class="auto-style16"> </td>
  95. <td> </td>
  96. <td class="btn"> </td>
  97. <td> </td>
  98. <td> </td>
  99. <td> </td>
  100. </tr>
  101. <tr>
  102. <td class="auto-style5">Comments</td>
  103. <td>:</td>
  104. <td colspan="5">
  105. <telerik:RadTextBoxID="RadTextBox12" runat="server" Width="540px" Height="50px" TextMode="MultiLine">
  106. </telerik:RadTextBox>
  107. </td>
  108. <td> </td>
  109. </tr>
  110. <tr>
  111. <td class="auto-style5"> </td>
  112. <td> </td>
  113. <tdcolspan="5"> </td>
  114. <td> </td>
  115. </tr>
  116. <tr>
  117. <td class="auto-style5"> </td>
  118. <td> </td>
  119. <td colspan="5">
  120. <telerik:RadButtonID="BtnCancel" runat="server" Text="Cancel" Width="100px">
  121. </telerik:RadButton>
  122. <telerik:RadButtonID="BtnReset" runat="server" Text="Reset" Width="100px">
  123. </telerik:RadButton>
  124. <telerik:RadButtonID="BtnSave" runat="server" BackColor="#0066FF" Text="Save" Width="100px">
  125. </telerik:RadButton>
  126. </td>
  127. <td> </td>
  128. </tr>
  129. <tr>
  130. <td class="auto-style5"> </td>
  131. <td> </td>
  132. <td colspan="5"> </td>
  133. <td> </td>
  134. </tr>
  135. <tr>
  136. <td class="auto-style5"> </td>
  137. <td> </td>
  138. <td colspan="5"> </td>
  139. <td> </td>
  140. </tr>
  141. </table>
  142. </div>
  143. </ContentTemplate>
  144. </telerik:RadWindow>
At the Button Click
  1. protected void BtnAddJobLine_Click(object sender, EventArgs e)
  2. {
  3. string script = "function f(){$find(\"" + RadWindow1.ClientID + "\").show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
  4. ScriptManager.RegisterStartupScript(this, this.GetType(), "key", script, true);
  5. }
  7. protected void BtnCancel_Click(object sender, EventArgs e)
  8. {
  9. string script = "function f(){$find(\"" + RadWindow1.ClientID + "\").close(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
  10. ScriptManager.RegisterStartupScript(this, this.GetType(), "key", script, true);
  11. }