This blog give the information like how generate popup window on button click using the jquery.

Look

For that create the new project and take a one webform:

new web form

After that go to:

Select project--->Right Click->Add New Item->and Select Webform

add new web form

Output

sample web page

And after click on button:

popup button

If you do not select any radio button and click onsubmit button the it gives alert message

radio button validate

Sample.aspx

Design

  1. <html>
  2. <body>
  3. <form id="form1" runat="server">
  4. <asp:Button Text="Modal Dialog" runat="server" ID="btnShowModal" />
  5. <asp:Button Text="Sample Dialog" runat="server" ID="btnShowSimple" Visible="false"/>
  6. <br />
  7. <br />
  8. <div id="output"></div>
  9. <div id="overlay" class="web_dialog_overlay"></div>
  10. <div id="dialog" class="web_dialog">
  11. <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
  12. <tr>
  13. <td class="web_dialog_title">Online Survey</td>
  14. <td class="web_dialog_title align_right"><a href="#" id="btnClose">Close</a></td>
  15. </tr>
  16. <tr>
  17. <td> </td>
  18. <td> </td>
  19. </tr>
  20. <tr>
  21. <td colspan="2" style="padding-left: 15px;"><b>In Wchich Country You Belongs? </b></td>
  22. </tr>
  24. <tr>
  25. <td colspan="2" style="padding-left: 15px;">
  26. <asp:RadioButtonList runat="server" ID="brands">
  27. <asp:ListItem Text="India" Value="India" />
  28. <asp:ListItem Text="America" Value="America" />
  29. <asp:ListItem Text="Canada" Value="Canada" />
  30. <asp:ListItem Text="Chaina" Value="Chaina" />
  31. </asp:RadioButtonList>
  32. </td>
  33. </tr>
  35. <tr>
  36. <td style="text-align: center;"><asp:Button Text="Submit" runat="server" ID="btnSubmit" /></td>
  37. <td style="text-align: center;"><asp:Button Text="Cancel" runat="server" ID="btnClose" /></td>
  38. </tr>
  39. </table>
  40. </div>
  41. </form>
  42. </body>
  43. </html>
Script
  1. <script type="text/javascript">
  3. $(document).ready(function () {
  5. $("#brands").attr("checked", false);
  6. $("#btnShowModal").click(function (e) {
  7. ShowDialog(true);
  8. e.preventDefault();
  9. });
  11. $("#btnClose").click(function (e) {
  12. HideDialog();
  13. e.preventDefault();
  14. });
  16. $("#btnSubmit").click(function (e) {
  17. if ($("#brands").find("input:checked").length > 0) {
  18. var brand = $("#brands input:radio:checked").val();
  19. $("#output").html("<b>Your Country Is : </b>" + brand);
  20. alert(" Your Country Is " + brand);
  21. HideDialog();
  22. e.preventDefault();
  23. }
  24. else {
  25. alert("Please select Radio Button")
  26. ShowDialog(true);
  27. e.preventDefault();
  28. }
  29. });
  31. });
  33. function ShowDialog(modal) {
  34. $("#overlay").show();
  35. $("#dialog").fadeIn(300);
  37. if (modal) {
  38. $("#overlay").unbind("click");
  39. }
  40. else {
  41. $("#overlay").click(function (e) {
  42. HideDialog();
  43. });
  44. }
  45. }
  47. function HideDialog() {
  48. $("#overlay").hide();
  49. $("#dialog").fadeOut(300);
  50. }
  52. </script>
CSS Code
  1. <style type="text/css">
  2. .web_dialog_overlay
  3. {
  4. position: fixed;
  5. top: 0;
  6. right: 0;
  7. bottom: 0;
  8. left: 0;
  9. height: 100%;
  10. width: 100%;
  11. margin: 0;
  12. padding: 0;
  13. background: #000000;
  14. opacity: .15;
  15. filter: alpha(opacity=15);
  16. -moz-opacity: .15;
  17. z-index: 101;
  18. display: none;
  19. }
  20. .web_dialog
  21. {
  22. display: none;
  23. position: fixed;
  24. width: 300px;
  25. height: 215px;
  26. top: 50%;
  27. left: 50%;
  28. margin-left: -190px;
  29. margin-top: -100px;
  30. background-color: #ffffff;
  31. border: 2px solid #336699;
  32. padding: 0px;
  33. z-index: 102;
  34. font-family: Verdana;
  35. font-size: 10pt;
  36. }
  37. .web_dialog_title
  38. {
  39. border-bottom: solid 2px #336699;
  40. background-color: #336699;
  41. padding: 4px;
  42. color: White;
  43. font-weight: bold;
  44. }
  45. .web_dialog_title a
  46. {
  47. color: White;
  48. text-decoration: none;
  49. }
  50. .align_right
  51. {
  52. text-align: right;
  53. }
  54. </style>