JQuery

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> 
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs