Post
Ask Question

Open PopUp on Button Click Using JQUERY

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>  
  23.               
  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>  
  34.               
  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">  
  2.   
  3.         $(document).ready(function () {  
  4.              
  5.             $("#brands").attr("checked", false);  
  6.             $("#btnShowModal").click(function (e) {  
  7.                 ShowDialog(true);  
  8.                 e.preventDefault();  
  9.             });  
  10.   
  11.             $("#btnClose").click(function (e) {  
  12.                 HideDialog();  
  13.                 e.preventDefault();  
  14.             });  
  15.   
  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.             });  
  30.   
  31.         });  
  32.   
  33.         function ShowDialog(modal) {  
  34.             $("#overlay").show();  
  35.             $("#dialog").fadeIn(300);  
  36.   
  37.             if (modal) {  
  38.                 $("#overlay").unbind("click");  
  39.             }  
  40.             else {  
  41.                 $("#overlay").click(function (e) {  
  42.                     HideDialog();  
  43.                 });  
  44.             }  
  45.         }  
  46.   
  47.         function HideDialog() {  
  48.             $("#overlay").hide();  
  49.             $("#dialog").fadeOut(300);  
  50.         }   
  51.           
  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>