• Tech
  • Forums
  • Jobs
  • Books
  • Events
  • Videos
  • Live
    • Interviews
    • Certification
    • Training
    • Career
    • Members
    • News
    • Blogs
  • An Article
  • A Blog
  • A Video
  • An Ebook
  • An Interview Question
  • Feed
  • Dashboard
  • Wallet
  • Learn
  • Achievements
  • Network
  • Rewards
  • SharpGPT
  • Premium
  • Register
  • Login
JQuery

JQueryUI - Day 9 (Dialog)

  • WhatsApp
  • Pankaj Kumar Choudhary
  • 8y
  • 4.7k
  • 0
  • 0
    • 100
  • Article

Before reading this article, I highly recommend reading the previous part of the series:

  • JQueryUI - Day 1
  • JQueryUI - Day 2 (Draggable)
  • JQueryUI - Day 3 (Droppable)
  • JQueryUI - Day 4 (Resizable)
  • JQuery UI - Day 5 (Selectable)
  • JQuery UI - Day 6 (Accordion)
  • JQuery UI - Day 7 (AutoComplete)
  • JQueryUI - Day 8 (Datepicker)

jQuery Dialog opens content in an interactive overlay. Dialog boxes are one of the nicest ways of presenting information on an HTML page. We can define dialog as a floating window with a title and content that can be moved in any direction or may be resized.

Syntax:

$(selector, context).dialog(options);

Or

$(selector, context).dialog("action", [params]);

Example:

  1. <!DOCTYPEhtml>  
  2.   
  3. <head runat="server">  
  4.   
  5.     <title></title>  
  6.   
  7.     <link href="http://code.jquery.com/ui/1.10.4/themes/blitzer/jquery-ui.css" rel="stylesheet">  
  8.   
  9.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  10.             </script>  
  11.   
  12.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  13.                 </script>  
  14.   
  15.                 <script>  
  16.                     $(document).ready(function()  
  17.                        {  
  18.   
  19.                         $("#dialog-1").dialog({  
  20.   
  21.                             autoOpen: false,  
  22.   
  23.                             buttons: [  
  24.   
  25.                                 {  
  26.   
  27.                                     text: "Ok",  
  28.   
  29.                                     icons:  
  30.                                   {  
  31.   
  32.                                         primary: " ui-icon-mail-closed"  
  33.   
  34.                                     },  
  35.   
  36.                                     click: function() {  
  37.   
  38.                                         $(this).dialog("close");  
  39.   
  40.                                     }  
  41.   
  42.                                 }  
  43.   
  44.                             ]  
  45.   
  46.                         });  
  47.   
  48.                         $("#show").click(function()   
  49.                           {  
  50.   
  51.                             $("#dialog-1").dialog("open");  
  52.   
  53.                         });  
  54.   
  55.                     });  
  56.                 </script>  
  57.   
  58.                 <style>  
  59.                     #datepicker-1 {  
  60.                         margin-top: 20px;  
  61.                     }  
  62.                      
  63.                     #div1 {  
  64.                         background-color: coral;  
  65.                         color: ButtonHighlight;  
  66.                         font-size: 30px;  
  67.                         height: 450px;  
  68.                         width: 1000px;  
  69.                         text-align: center;  
  70.                         margin-left: 150px  
  71.                     }  
  72.                      
  73.                     #show {  
  74.                         font-size: 20px;  
  75.                         background-color: #14E058  
  76.                     }  
  77.                 </style>  
  78.   
  79.                 </head>  
  80.   
  81.                 <body>  
  82.   
  83.                     <div id="div1">  
  84.   
  85.                         <span>************Dialog*************</span>  
  86.   
  87.                         <div class="ui-widget">  
  88.   
  89.                             <div id="dialog-1">  
  90.   
  91.                                 <h1>Dialog Box</h1>  
  92.                                 <br/>  
  93.   
  94.                                 <span>This is a simple dialog Example</span>  
  95.   
  96.                                 </div>  
  97.   
  98.                                 <input id="show" type="button" value="Show Dialog" "/>  
  99.   
  100. </div>  
  101.   
  102. </div>  
  103.   
  104. </body>  
  105.   
  106. </html>  

Output:

output

Options:

Option

Description

Example

autoOpen

If set to true, the dialog will automatically open upon initialization. When false, the dialog box will be opened upon a call to dialog('open'). By default its value is true.

$("#dialog-1").dialog({

autoOpen: false

});

button

Specifies which buttons should be displayed on the dialog. These are listed as objects, and each property is the text on the button.

$("#dialog-1").dialog({

buttons: [

{

text: "Ok",

icons: {

primary: " ui-icon-mail-closed"

},

click: function () {

$(this).dialog("close");

}

}

]

});

closeOnEscape

Specifies whether the dialog should close when it has focus and the user presses the escape (ESC) key.

$("#dialog-1").dialog({

closeOnEscape: false

});

closeText

Specifies the text for the close button.

$("#dialog-1").dialog({

closeText:"Close"

});

dialogClass

The specified class name(s) will be added to the dialog, for additional theming.

$("#dialog-1").dialog({

dialogClass: "alert"

});

draggable

If set to false dialog box will not be draggable by clicking and dragging the title bar.

$("#dialog-1").dialog({

draggable: false

});

height

The height of the dialog.

$("#dialog-1").dialog({

height: 300

});

hide

This option is used to set the effect to be used when the dialog box is closed. By default its value is null.

$("#dialog-1").dialog({

hide: { effect:"explode", duration: 1300 }

});

maxHeight

The maximum height to which the dialog can be resized.

$("#dialog-1").dialog({

maxHeight: 400

});

maxWidth

The maximum width to which the dialog can be resized.

$("#dialog-1").dialog({

maxWidth: 400

});

minHeight

The minimum height to which the dialog can be resized.

$("#dialog-1").dialog({

minHeight: 600

});

minWidth

The minimum width to which the dialog can be resized

$("#dialog-1").dialog({

minWidth: 600

});

modal

If this option is set to true the dialog will have modal behavior and other items on the page will be disabled.

$("#dialog-1").dialog({

modal:true

});

position

Specifies where the dialog should be displayed when opened. Default value is { my: "center", at: "center", of: window }

$("#dialog-1").dialog({

position:{ my: "center", at:"center", of: window }

});

resizable

If set to true then dialog box can be resized. By default its value is true.

$("#dialog-1").dialog({

resizable: false

});

show

Define If and how to animate the showing of the dialog. By default its value is null.

$("#dialog-1").dialog({

show: { effect: "blind", duration: 500 }

});

title

Specifies the title of the dialog.

$("#dialog-1").dialog({

title: "Dialog Box"

});

width

The width of the dialog in pixels.

$("#dialog-1").dialog({

width:400

});

Methods:

Method

Description

Example

close()

Closes the dialog.

$("#dialog-1").dialog("close");

destroy()

Removes the dialog functionality completely. This will return the element back to its pre-init state.

$("#dialog-1").dialog("destroy");

instance()

Retrieves the dialog's instance object.

Varobj=$("#dialog-1").dialog("instance");

isOpen()

Check whether the dialog is currently open.

Varobj=$("#dialog-1").dialog("isOpen");

moveToTop()

Moves the dialog to the top of the dialog stack.

$("#dialog-1").dialog("moveToTop");

open()

Opens the dialog.

$("#dialog-1").dialog("open");

option(option_Name)

Gets the value currently associated with the specifiedoptionName.

Varobj=$("#dialog-1").dialog("maxHeight");

option()

Gets an object containing key/value pairs representing the current dialog options

Varobj=$("#dialog-1").dialog();

option(option_name,value)

Sets the value of the dialog option associated with the specified optionName.

Varobj=$("#dialog-1").dialog("maxHeight",100);

widget()

Returns a jQuery object of dialog()

$("#dialog-1").dialog("widget");

Events:

Event

Description

Example

beforeClose(event,ui)

Event triggered when a dialog is about to close. If canceled, the dialog will not close

$("#dialog-1").dialog({

beforeClose: function (event, ui) {

}});

close(event,ui)

Event triggered when the dialog is closed.

$("#dialog-1").dialog({

close: function (event, ui) {

}});

create(event,ui)

Event triggered when the dialog is closed.

$("#dialog-1").dialog({

create: function (event, ui) {

}});

drag(event,ui)

Event triggered while the dialog is being dragged.

$("#dialog-1").dialog({

drag: function (event, ui) {

}});

dragStart(event,ui)

Event triggered when the user starts dragging the dialog.

$("#dialog-1").dialog({

dragStart: function (event, ui) {

}});

dragStop(event,ui)

Event triggered after the dialog has been dragged.

$("#dialog-1").dialog({

dragStop: function (event, ui) {

}});

focus(event,ui)

Event triggered when the dialog gains focus.

$("#dialog-1").dialog({

focus: function (event, ui) {

}});

open(event,ui)

Event triggered when the dialog is opened.

$("#dialog-1").dialog({

open: function (event, ui) {

}});

resize(event,ui)

Event is triggered repeatedly as a dialog box is resized.

$("#dialog-1").dialog({

resize: function (event, ui) {

}});

resizeStart(event,ui)

Event is triggered when a resize of the dialog box start.

$("#dialog-1").dialog({

resizeStart: function (event, ui) {

}});

resizeStop(event,ui)

Event is triggered when a resize of the dialog box terminates.

$("#dialog-1").dialog({

resizeStop: function (event, ui) {

}});

Let us take some example.

Example 1:

  1. <!DOCTYPE html>  
  2.   
  3. <head runat="server">  
  4.   
  5.     <title></title>  
  6.   
  7.     <link href="http://code.jquery.com/ui/1.10.4/themes/blitzer/jquery-ui.css" rel="stylesheet">  
  8.   
  9.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  10.             </script>  
  11.   
  12.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  13.                 </script>  
  14.   
  15.                 <script>  
  16.                     $(document).ready(function() {  
  17.   
  18.                         $("#dialog-1").dialog({  
  19.   
  20.                             autoOpen: false,  
  21.   
  22.                             show: "puff",  
  23.   
  24.                             hide: "slide",  
  25.   
  26.                             closeOnEscape: false,  
  27.   
  28.                             title: "Hello!"  
  29.   
  30.                         });  
  31.   
  32.                         $("#show").click(function() {  
  33.   
  34.                             $("#dialog-1").dialog("open");  
  35.   
  36.                         })  
  37.   
  38.                     });  
  39.                 </script>  
  40.   
  41.                 <style>  
  42.                     #datepicker-1 {  
  43.                         margin-top: 20px;  
  44.                     }  
  45.                      
  46.                     #div1 {  
  47.                         background-color: coral;  
  48.                         color: ButtonHighlight;  
  49.                         font-size: 30px;  
  50.                         height: 450px;  
  51.                         width: 1000px;  
  52.                         text-align: center;  
  53.                         margin-left: 150px  
  54.                     }  
  55.                      
  56.                     #show {  
  57.                         font-size: 20px;  
  58.                         background-color: #14E058  
  59.                     }  
  60.                 </style>  
  61.   
  62.                 </head>  
  63.   
  64.                 <body>  
  65.   
  66.                     <divid="div1">  
  67.   
  68.                         <span>************Dialog*************</span>  
  69.   
  70.                         <divclass="ui-widget">  
  71.   
  72.                             <divid="dialog-1">  
  73.   
  74.                                 <h1>Dialog Box</h1>  
  75.                                 <br/>  
  76.   
  77.                                 <span>This is a simple dialog Example</span>  
  78.   
  79.                                 </div>  
  80.   
  81.                                 <inputid="show" type="button" value="Show Dialog" "/>  
  82.   
  83.                 </div>  
  84.   
  85.             </div>  
  86.   
  87.         </body>  
  88.   
  89. </html>  

Output:

output

When we click on “Show Dialog” button , a dialog box will be visible. The title of the dialog box is “Hello!” and the dialog box is visible in “puff” animation style. When we click on the cross button this dialog box become closed with slide animation effect.

Example 2:

  1. <!DOCTYPE html>  
  2.   
  3. <head runat="server">  
  4.   
  5.     <title></title>  
  6.   
  7.     <link href="http://code.jquery.com/ui/1.10.4/themes/blitzer/jquery-ui.css" rel="stylesheet">  
  8.   
  9.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  10.             </script>  
  11.   
  12.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  13.                 </script>  
  14.   
  15.                 <script>  
  16.                     $(document).ready(function() {  
  17.   
  18.                         $("#dialog-1").dialog({  
  19.   
  20.                             autoOpen: false,  
  21.   
  22.                             show: "puff",  
  23.   
  24.                             hide: "slide",  
  25.   
  26.                             closeOnEscape: false,  
  27.   
  28.                             title: "Hello!",  
  29.   
  30.                             height: 400,  
  31.   
  32.                             width: 400,  
  33.   
  34.                             buttons: [  
  35.   
  36.                                 {  
  37.   
  38.                                     text: "Ok",  
  39.   
  40.                                     icons: {  
  41.   
  42.                                         primary: " ui-icon-mail-closed"  
  43.   
  44.                                     },  
  45.   
  46.                                     click: function() {  
  47.   
  48.                                         $(this).dialog("close");  
  49.   
  50.                                     }  
  51.   
  52.                                 }  
  53.   
  54.                             ]  
  55.   
  56.                         });  
  57.   
  58.                         $("#ui-datepicker-year").datepicker({  
  59.   
  60.                             autoSize: true,  
  61.   
  62.                             showOn: "button",  
  63.   
  64.                             buttonImage: "/jquery-ui-1.11.4.custom/images/datepicker.gif",  
  65.   
  66.                             changeMonth: true  
  67.   
  68.                         });  
  69.   
  70.                         $("#show").click(function() {  
  71.   
  72.                             $("#dialog-1").dialog("open");  
  73.   
  74.                         })  
  75.   
  76.                     });  
  77.                 </script>  
  78.   
  79.                 <style>  
  80.                     #datepicker-1 {  
  81.                         margin-top: 20px;  
  82.                     }  
  83.                      
  84.                     #div1 {  
  85.                         background-color: coral;  
  86.                         color: ButtonHighlight;  
  87.                         font-size: 30px;  
  88.                         height: 450px;  
  89.                         width: 1000px;  
  90.                         text-align: center;  
  91.                         margin-left: 150px  
  92.                     }  
  93.                      
  94.                     #show {  
  95.                         font-size: 20px;  
  96.                         background-color: #14E058  
  97.                     }  
  98.                 </style>  
  99.   
  100.                 </head>  
  101.   
  102.                 <body>  
  103.   
  104.                     <div id="div1">  
  105.   
  106.                         <span>************Dialog*************</span>  
  107.   
  108.                         <div  class="ui-widget">  
  109.   
  110.                             <divid="dialog-1">  
  111.   
  112.                                 <h1>Select Date</h1>  
  113.                                 <br/>  
  114.   
  115.                                 <div class="ui-widget">  
  116.   
  117.                                     <input type="text" id="ui-datepicker-year" />  
  118.   
  119.                                     </div>  
  120.   
  121.                                     </div>  
  122.   
  123.                                     <input id="show" type="button" value="Show Dialog" "/>  
  124.   
  125.                         </div>  
  126.   
  127.                     </div>  
  128.   
  129.             </body>  
  130.   
  131. </html>  

Output:

output

In the above example we are displaying a datepicker in dialog box. We also define a button for the dialog box and we defined the text and icon for this button. When we click on this button the dialog box will be closed.

Example 3:

  1. <!DOCTYPE html>  
  2.   
  3. <head runat="server">  
  4.   
  5.     <title></title>  
  6.   
  7.     <link href="http://code.jquery.com/ui/1.10.4/themes/blitzer/jquery-ui.css" rel="stylesheet">  
  8.   
  9.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  10.             </script>  
  11.   
  12.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  13.                 </script>  
  14.   
  15.                 <script>  
  16.                     $(document).ready(function() {  
  17.   
  18.                         var States = [  
  19.   
  20.                             {  
  21.                                 label: "Andra Pradesh",  
  22.                                 value: "ANP",  
  23.                                 desc: "Capital is Hyderabad"  
  24.                             },  
  25.   
  26.                             {  
  27.                                 label: "Arunachal Pradesh",  
  28.                                 value: "ARP",  
  29.                                 desc: "Capital is Itangar"  
  30.                             },  
  31.   
  32.                             {  
  33.                                 label: "Bihar",  
  34.                                 value: "BIH",  
  35.                                 desc: "Capital is Patna"  
  36.                             },  
  37.   
  38.                             {  
  39.                                 label: "Chhattisgarh",  
  40.                                 value: "CHT",  
  41.                                 desc: "Capital is Raipur"  
  42.                             },  
  43.   
  44.                             {  
  45.                                 label: "Goa",  
  46.                                 value: "GOA",  
  47.                                 desc: "Capital is Panaji"  
  48.                             },  
  49.   
  50.                             {  
  51.                                 label: "Haryana",  
  52.                                 value: "HAR",  
  53.                                 desc: "Chandigarh"  
  54.                             },  
  55.   
  56.                             {  
  57.                                 label: "Jammu and Kashmir",  
  58.                                 value: "JAK",  
  59.                                 desc: "Srinagar and Jammu"  
  60.                             },  
  61.   
  62.                             {  
  63.                                 label: "Kerala",  
  64.                                 value: "KRL",  
  65.                                 desc: "Capital is Thiruvananthapuram"  
  66.                             },  
  67.   
  68.                             {  
  69.                                 label: "Mizoram",  
  70.                                 value: "MIZ",  
  71.                                 desc: "Capital is Aizawi"  
  72.                             },  
  73.   
  74.                             {  
  75.                                 label: "Rajasthan",  
  76.                                 value: "RAJ",  
  77.                                 desc: "Capital is Jaipur"  
  78.                             },  
  79.   
  80.                             {  
  81.                                 label: "Sikkim",  
  82.                                 value: "SKM",  
  83.                                 desc: "Capital is Gangtok"  
  84.                             },  
  85.   
  86.                             {  
  87.                                 label: "Uttaranchal",  
  88.                                 value: "UTH",  
  89.                                 desc: "Capital is Dehradun"  
  90.                             },  
  91.   
  92.                             {  
  93.                                 label: "West Bengal",  
  94.                                 value: "WGL",  
  95.                                 desc: "Capital is Kolkata"  
  96.                             },  
  97.   
  98.                         ];  
  99.   
  100.                         $("#dialog-1").dialog({  
  101.   
  102.                             autoOpen: false,  
  103.   
  104.                             show: "puff",  
  105.   
  106.                             hide: "slide",  
  107.   
  108.                             closeOnEscape: false,  
  109.   
  110.                             title: "Hello!",  
  111.   
  112.                             height: 400,  
  113.   
  114.                             width: 400,  
  115.   
  116.                             buttons: [  
  117.   
  118.                                 {  
  119.   
  120.                                     text: "Ok",  
  121.   
  122.                                     icons: {  
  123.   
  124.                                         primary: " ui-icon-mail-closed"  
  125.   
  126.                                     },  
  127.   
  128.                                     click: function() {  
  129.   
  130.                                         $(this).dialog("close");  
  131.   
  132.                                     }  
  133.   
  134.                                 }  
  135.   
  136.                             ]  
  137.   
  138.                         });  
  139.   
  140.                         $("#ui-datepicker-year").datepicker({  
  141.   
  142.                             autoSize: true,  
  143.   
  144.                             showOn: "button",  
  145.   
  146.                             buttonImage: "/jquery-ui-1.11.4.custom/images/datepicker.gif",  
  147.   
  148.                             changeMonth: true  
  149.   
  150.                         });  
  151.   
  152.                         $("#show").click(function() {  
  153.   
  154.                             $("#dialog-1").dialog("open");  
  155.   
  156.                         })  
  157.   
  158.                         $("#automplete-1").autocomplete({  
  159.   
  160.                             source: States,  
  161.   
  162.                             autoFocus: true,  
  163.   
  164.                             minLength: 2,  
  165.   
  166.                             delay: 400,  
  167.   
  168.                             position: {  
  169.                                 my: "right top",  
  170.                                 at: "right bottom",  
  171.                                 collision: "none"  
  172.                             },  
  173.   
  174.                             focus: function(event, ui) {  
  175.   
  176.                                 $("#automplete-1").val(ui.item.value);  
  177.   
  178.                             },  
  179.   
  180.                             select: function(event, ui) {  
  181.   
  182.                                 $("#automplete-1").val(ui.item.value);  
  183.   
  184.                                 $("#auto_id").val(ui.item.label);  
  185.   
  186.                                 returnfalse;  
  187.   
  188.                             }  
  189.   
  190.                         })  
  191.   
  192.                         .data("ui-autocomplete")._renderItem = function(ul, item) {  
  193.   
  194.                             return $("<li>").append("<a>" + item.label + "<br>" + "<i style=\"color:#1ACE26\">" + item.desc + "</i>" + "</a>")  
  195.   
  196.                             .appendTo(ul);  
  197.   
  198.                         };  
  199.   
  200.                     });  
  201.                 </script>  
  202.   
  203.                 <style>  
  204.                     #datepicker-1 {  
  205.                         margin-top: 20px;  
  206.                     }  
  207.                      
  208.                     #div1 {  
  209.                         background-color: coral;  
  210.                         color: ButtonHighlight;  
  211.                         font-size: 30px;  
  212.                         height: 450px;  
  213.                         width: 1000px;  
  214.                         text-align: center;  
  215.                         margin-left: 150px  
  216.                     }  
  217.                      
  218.                     #show {  
  219.                         font-size: 20px;  
  220.                         background-color: #14E058  
  221.                     }  
  222.                      
  223.                     #automplete-1 {  
  224.                         margin-left: 120px  
  225.                     }  
  226.                 </style>  
  227.   
  228.                 </head>  
  229.   
  230.                 <body>  
  231.   
  232.                     <div id="div1">  
  233.   
  234.                         <span>************Dialog*************</span>  
  235.   
  236.                         <div class="ui-widget">  
  237.   
  238.                             <div id="dialog-1">  
  239.   
  240.                                 <h1>Select State</h1>  
  241.                                 <br/>  
  242.   
  243.                                 <div class="ui-widget">  
  244.   
  245.                                     <input type="text" id="automplete-1" />  
  246.   
  247.                                     <input type="hidden" id="auto_id">  
  248.   
  249.                                         </div>  
  250.   
  251.                                         </div>  
  252.   
  253.                                         <input id="show" type="button" value="Show Dialog" "/>  
  254.   
  255.                             </div>  
  256.   
  257.                     </div>  
  258.   
  259.         </body>  
  260.   
  261. </html>  

Output:

output

In above example we are showing  autocomplete in dialog box.

  • Dialog
  • JQuery
  • JQueryUI
  • Learn JQuery
Up Next
    Ebook Download
    View all
    C# Corner Ebook
    Printing in C# Made Easy
    Read by 10.8k people
    Download Now!
    Learn
    View all
    Learn Image
    Build And Architect Distributed Cloud Applications
    Leaderboard
    View all
    Deepak Tewatia

    Deepak Tewatia
    +2
    Deepak Tewatia

    Deepak Tewatia
    +0
    Raveena Attri

    Raveena Attri
    -70
    View all
    Yesterday's leader
    Deepak Tewatia  
    Deepak Tewatia
    Noida (India)
    203
    0
    205
    500
    Member of the month
    Rinki  
    Rinki
    Chennai (India)
    15
    5.5k
    14.8k
    50
    Speaker of the month
    Shivam Payasi  
    Shivam Payasi
    C#, .NET
    Chitrakoot (India)
    8
    21.2k
    19.2k
    10
    Upcoming events
    View all
    • Bhubaneswar Chapter
    • Building Websites with Microsoft Power Pages: Exploring WebPage, WebTemplate, and Page Templates - Microsoft Business Application Ep. 25
    Suggested for you
    View all
    Gaurav Kumar Singh Gaurav Kumar Singh
    Follow
    Nilesh Jadav Nilesh Jadav
    Follow
    Allen James Allen James
    Follow
    Manish Tewatia Manish Tewatia
    Follow
    Shivam Payasi Shivam Payasi
    Follow

    CSharpBot

    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

    Sign-Up Now

    For Basic members:

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

    $20

    $

    . 00

    monthly

    Sign-Up Now

    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

    Sign-Up Now

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs
    About Us Contact Us Privacy Policy Terms Media Kit Partners C# Tutorials Consultants Ideas Report A Bug FAQs Certifications Sitemap Stories CSharp TV DB Talks Let's React Web3 Universe Interviews.help Jumpstart Blockchain Build with JavaScript

    ©2024 C# Corner.

    All contents are copyright of their authors.