{"id":20,"date":"2023-08-25T17:32:29","date_gmt":"2023-08-25T17:32:29","guid":{"rendered":"\/\/api.jquerymobile.com\/1.3\/?p=20"},"modified":"2023-08-25T17:32:29","modified_gmt":"2023-08-25T17:32:29","slug":"dialog","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.3\/dialog\/","title":{"rendered":"Dialog Widget"},"content":{"rendered":"

\nDialog Widget<\/span>version added: 1.0<\/span>\n<\/h2>\n
\n

Description: <\/strong>Opens content in an interactive overlay.<\/p>\n

QuickNavExamples<\/a>\n<\/h2><\/header>
\n

Options<\/h3>\n
closeBtn<\/a><\/div>\n
closeBtnText<\/a><\/div>\n
corners<\/a><\/div>\n
initSelector<\/a><\/div>\n
overlayTheme<\/a><\/div>\n<\/div>\n
\n

Methods<\/h3>\n
close<\/a><\/div>\n<\/div>\n
\n

Events<\/h3>\n
create<\/a><\/div>\n<\/div><\/section>
\n\t\t

Any page can be presented as a modal dialog by adding the data-rel="dialog"<\/code> attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page.<\/p>\n

\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
<a<\/span> href<\/span>="foo.html"<\/span> data-rel<\/span>="dialog"<\/span>><\/span>Open dialog<\/a<\/span>><\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t