Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Sitemap
Menu

jQuery UI Tutorial to Show Popup Modal or Dialog Window With Custom Styles & Options in Browser

Posted on March 24, 2023

 

 

Welcome folks today in this blog post we will be showing popup modal or dialog window with custom styles and options in browser using jquery in browser. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI Dialog functionality</title>  
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
   </head>  
   <body>  
  
   </body>  
</html>

 

 

As you can see we are including the jquery ui library cdn for both the css and js as shown above. And now we need to add the html for the dialog modal window as shown below

 

 

1
2
3
<!-- HTML -->  
<div id="dialog-1" title="Blackcaps New Zealand">Kane Williamson is the Captain of NZ.</div>  
<button id="opener">Open Dialog</button>

 

 

And now we need to add the javascript code for showing the dialog window

 

JavaScript
1
2
3
4
5
6
7
8
$(function() {  
            $( "#dialog-1" ).dialog({  
               autoOpen: false
            });  
            $( "#opener" ).click(function() {  
               $( "#dialog-1" ).dialog( "open" );  
            });  
         });

 

 

As you can see in the above code we are having the jquery onready function we are attaching the dialog window function and inside it we are making the autoOpen property to false. And then we are calling the dialog() method when the user clicks the button as shown below

 

 

 

 

And now we can customize the styles of the dialog window by adding the below lines of the css code as shown below

 

 

1
2
3
4
5
6
7
8
<style>  
         .ui-widget-header,.ui-state-default, ui-button{  
            background:#b9cd6d;  
            border: 1px solid #b9cd6d;  
            color: #FFFFFF;  
            font-weight: bold;  
         }  
      </style>

 

 

 

Adding Buttons inside Modal Window

 

 

We can even add the ok buttons inside the modal popup window as shown below

 

 

index.html

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI Dialog functionality</title>  
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <!-- CSS -->  
      <style>  
         .ui-widget-header,.ui-state-default, ui-button{  
            background:lightgreen;  
            border: 1px solid #b9cd6d;  
            color: black;  
            font-weight: bold;  
         }  
      </style>  
      <!-- Javascript -->  
      <script>  
         $(function() {  
            $( "#dialog-2" ).dialog({  
               autoOpen: false,  
               buttons: {  
                  OK: function() {$(this).dialog("close");}  
               },  
               title: "Movie Title:Sholey",  
               position: {  
                  my: "left center",  
                  at: "left center"  
               }  
            });  
            $( "#opener-2" ).click(function() {  
               $( "#dialog-2" ).dialog( "open" );  
            });  
         });  
      </script>  
   </head>  
   <body>  
      <!-- HTML -->  
      <div id="dialog-2" title="Blackcaps NZ">Kane Williamson is captain of NZ.</div>  
      <button id="opener-2">Open Dialog</button>  
   </body>  
</html>

 

 

 

Recent Posts

  • Build a Fixed Deposit Interest Calculator Using Amount and Time in Browser Using HTML5 & Javascript
  • How to Download Files From URL in Node.js Using Node-Downloader-Helper Library
  • Angular 10 Image Carousel and Video Gallery Lightbox Modal Slider Using ng-image-slider Library
  • React Unsplash Api Photo Search App
  • React Form Validation Using Formik and Yup
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • javascript
  • Koajs
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme