{"id":2543,"date":"2015-03-04T13:15:12","date_gmt":"2015-03-04T11:15:12","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=2543"},"modified":"2018-06-19T09:54:20","modified_gmt":"2018-06-19T06:54:20","slug":"jquery-dialog-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/","title":{"rendered":"jQuery dialog example"},"content":{"rendered":"

EDITORIAL NOTE<\/strong>: In this post, we feature a jQuery dialog example. A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the ‘x’ icon by default.<\/p>\n

jQuery UI is a collection of jQuery plugins used to enhance the web application user interface. Inside this library we find many reusable components for interactions, effects, widgets and more.<\/p>\n

[ulp id=’qGGDqWnle19VavkM’]<\/p>\n

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. http:\/\/jqueryui.com\/<\/a><\/em><\/p><\/blockquote>\n

What is the jQuery Dialog<\/h2>\n

jQuery Dialog is a powerful JavaScript popup window built-in the jQuery user interface library (jQuery ui<\/a>) and it’s mostly used to show an alert message box or simple html forms such as log in\/signup forms. The dialog box is mainly composed from two section, header and body but it’s also fully customizable to allow developers makes own structure.<\/p>\n

In this example, I will introduce different uses of this overlay, starting with a Hello World example.<\/p>\n

1. Hello World dialog<\/h3>\n

First, you need to download the jQuery and jQuery ui libraries from here<\/a> and here<\/a> or use one of CDNs provided on the jQuery Website.
\nCreate an empty HTML file and put into the code like the following:<\/p>\n

\r\n<!doctype html>\r\n<html lang="en">\r\n<head>\r\n<meta charset="utf-8">\r\n<title>jQuery Dialog Example - Hello World!<\/title>\r\n<!-- todo: add scripts and css -->\r\n<\/head>\r\n<body>\r\n<!-- todo: add html anchor and div to show dialog -->\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Now put the scripts and style references between the head<\/code> tags.<\/p>\n
\r\n<!doctype html>\r\n<html lang="en">\r\n<head>\r\n<meta charset="utf-8">\r\n<title>jQuery Dialog Example - Hello World!<\/title>\r\n  <link href="jquery-ui.css" rel="stylesheet">\r\n  <img src="data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22jquery.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" \/>\r\n  <img src="data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22jquery-ui.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" \/>\r\n<\/head>\r\n<body>\r\n<!-- todo: add html anchor and div to show dialog -->\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Your page is now ready, let’s add some code to run the hello world dialog.<\/p>\n
I will create between the body<\/code> tags a DIV<\/code> element with id=\"MyDialog\"<\/code>, this id<\/code> is used in the selector to apply the dialog()<\/code> event. Also, I will add to this DIV<\/code> the title<\/code> attribute that should be showed as Dialog header.<\/p>\n
By default dialog()<\/code> has the property autoOpen<\/code> set to true<\/code>, so I want to set it false<\/code> then add a button to lunch the dialog. The full code will be:<\/p>\n
index.html<\/em><\/span><\/p>\n
\r\n<!doctype html>\r\n<html lang="en">\r\n<head>\r\n<meta charset="utf-8">\r\n<title>jQuery Dialog Example - Hello World!<\/title>\r\n  <link href="jquery-ui.css" rel="stylesheet">\r\n  <img src="data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22jquery.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" \/>\r\n  <img src="data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22jquery-ui.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" \/>\r\n  <img src="data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%24(function()%20%7B%0A%20%20%20%20%2F%2F%20Apply%20dialog%20to%20MyDialog%20id%0A%20%20%20%20%24(%20%22%23MyDialog%22%20).dialog(%7B%0A%20%20%20%20%20%20autoOpen%3A%20false%2C%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%2F%2F%20Attach%20a%20click%20event%20to%20the%20button%20with%20id%20openDialog%0A%20%20%20%20%24(%20%22%23openDialog%22%20).click(function()%20%7B%0A%20%20%20%20%20%20%24(%20%22%23MyDialog%22%20).dialog(%20%22open%22%20)%3B%0A%20%20%20%20%7D)%3B%0A%20%20%7D)%3B%0A%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" \/>\r\n<\/head>\r\n<body>\r\n\r\n\r\n\r\n\r\n<div id="MyDialog" title="Hello World dialog">\r\n  \r\n\r\nThis is My Hello World dialog.\r\n\r\n<\/div>\r\n\r\n\r\n\r\n\r\n<!-- Button lunch dialog -->\r\n<button id="openDialog">Click  me<\/button>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
The result of this example is:<\/p>\n
\"jQuery<\/a>
jQuery Dialog Example – Hello World<\/figcaption><\/figure>\n
2. Advanced dialog example<\/h3>\n
Repeating same steps as above, but this time, I will replace the script section by the following code:<\/p>\n
\r\n  $(function() {\r\n    $( "#MyDialog" ).dialog({\r\n      autoOpen: false,\r\n      resizable: false, \/\/ prevent resize of the dialog\r\n      height:250, \/\/ set the height to 250px\r\n      modal: true, \/\/ show a modal overlay in background\r\n      buttons: {\r\n        "Save": function() {\r\n\t\t  \/\/ do your business code here\r\n\t\t  alert("you've press save");\r\n          $( this ).dialog( "close" );\r\n        },\r\n        Cancel: function() {\r\n          $( this ).dialog( "close" );\r\n        }\r\n      }\r\n    });\r\n\t\r\n    $( "#openDialog" ).click(function() {\r\n      $( "#MyDialog" ).dialog( "open" );\r\n    });\r\n  });\r\n<\/pre>\n
As you see, the function dialog()<\/code> take new options. The option resizable<\/code> is used to allow or prevent dialog resizing. I’ve fixed the dialog height<\/code> to 250px. The modal<\/code> option is very important in case we need to focused user attention on the alert box, an overlay background is shown behind the dialog that make the box more attractive.<\/p>\n
Among these options, I’ve also defined the buttons<\/code> option that declare 2 buttons for this dialog and we can assign a callback function on each one.<\/p>\n
We can do more advanced scripts with the dialog<\/code> jQuery plugin. Now, I advise you to read carefully the examples and try coding from scratch.<\/p>\n
Download the source code for dialog<\/h2>\n
This was an example of jQuery Dialog.<\/p>\n
Download<\/strong>
\nYou can download the full source code of this example here: jQueryDialogExamples<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
EDITORIAL NOTE: In this post, we feature a jQuery dialog example. A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the ‘x’ icon by default. jQuery UI is a collection of jQuery plugins used to enhance the web application …<\/p>\n","protected":false},"author":58,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-2543","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"yoast_head":"\njQuery dialog example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn about jQuery dialog? Then check out our example where we will introduce you different uses of this overlay, starting with a Hello World.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery dialog example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn about jQuery dialog? Then check out our example where we will introduce you different uses of this overlay, starting with a Hello World.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-04T11:15:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-06-19T06:54:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rami Tayba\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rami Tayba\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/\"},\"author\":{\"name\":\"Rami Tayba\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0e396cc2123832350fac098b7d861d29\"},\"headline\":\"jQuery dialog example\",\"datePublished\":\"2015-03-04T11:15:12+00:00\",\"dateModified\":\"2018-06-19T06:54:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/\"},\"wordCount\":1174,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/\",\"name\":\"jQuery dialog example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-03-04T11:15:12+00:00\",\"dateModified\":\"2018-06-19T06:54:20+00:00\",\"description\":\"Interested to learn about jQuery dialog? Then check out our example where we will introduce you different uses of this overlay, starting with a Hello World.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery dialog example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0e396cc2123832350fac098b7d861d29\",\"name\":\"Rami Tayba\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3a79461c791099d87bb3b8bc979f3a9e844f9f950d1a70efb24d5a8af4490ce1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3a79461c791099d87bb3b8bc979f3a9e844f9f950d1a70efb24d5a8af4490ce1?s=96&d=mm&r=g\",\"caption\":\"Rami Tayba\"},\"description\":\"Rami Tayba is a Software Engineer graduated from Lebanese University, he is experienced in web development and IT project management. During his experience, he was leading various teams and has been involved into many large projects from analysis and design to implementation.\",\"sameAs\":[\"http:\/\/ramitayba.tk\/\",\"http:\/\/www.linkedin.com\/pub\/rami-tayba\/34\/231\/415\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/rami-tayba\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery dialog example - Web Code Geeks - 2026","description":"Interested to learn about jQuery dialog? Then check out our example where we will introduce you different uses of this overlay, starting with a Hello World.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery dialog example - Web Code Geeks - 2026","og_description":"Interested to learn about jQuery dialog? Then check out our example where we will introduce you different uses of this overlay, starting with a Hello World.","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2015-03-04T11:15:12+00:00","article_modified_time":"2018-06-19T06:54:20+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Rami Tayba","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Rami Tayba","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/"},"author":{"name":"Rami Tayba","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0e396cc2123832350fac098b7d861d29"},"headline":"jQuery dialog example","datePublished":"2015-03-04T11:15:12+00:00","dateModified":"2018-06-19T06:54:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/"},"wordCount":1174,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/","name":"jQuery dialog example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-03-04T11:15:12+00:00","dateModified":"2018-06-19T06:54:20+00:00","description":"Interested to learn about jQuery dialog? Then check out our example where we will introduce you different uses of this overlay, starting with a Hello World.","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dialog-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery dialog example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0e396cc2123832350fac098b7d861d29","name":"Rami Tayba","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3a79461c791099d87bb3b8bc979f3a9e844f9f950d1a70efb24d5a8af4490ce1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3a79461c791099d87bb3b8bc979f3a9e844f9f950d1a70efb24d5a8af4490ce1?s=96&d=mm&r=g","caption":"Rami Tayba"},"description":"Rami Tayba is a Software Engineer graduated from Lebanese University, he is experienced in web development and IT project management. During his experience, he was leading various teams and has been involved into many large projects from analysis and design to implementation.","sameAs":["http:\/\/ramitayba.tk\/","http:\/\/www.linkedin.com\/pub\/rami-tayba\/34\/231\/415"],"url":"https:\/\/www.webcodegeeks.com\/author\/rami-tayba\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=2543"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2543\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=2543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=2543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=2543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}