{"id":24,"date":"2023-08-25T17:43:19","date_gmt":"2023-08-25T17:43:19","guid":{"rendered":"\/\/api.jqueryui.com\/1.9\/?p=24"},"modified":"2023-08-25T17:43:19","modified_gmt":"2023-08-25T17:43:19","slug":"dialog","status":"publish","type":"post","link":"https:\/\/api.jqueryui.com\/1.9\/dialog\/","title":{"rendered":"Dialog Widget"},"content":{"rendered":"

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

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

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

Options<\/h3>\n
autoOpen<\/a><\/div>\n
buttons<\/a><\/div>\n
closeOnEscape<\/a><\/div>\n
closeText<\/a><\/div>\n
dialogClass<\/a><\/div>\n
draggable<\/a><\/div>\n
height<\/a><\/div>\n
hide<\/a><\/div>\n
maxHeight<\/a><\/div>\n
maxWidth<\/a><\/div>\n
minHeight<\/a><\/div>\n
minWidth<\/a><\/div>\n
modal<\/a><\/div>\n
position<\/a><\/div>\n
resizable<\/a><\/div>\n
show<\/a><\/div>\n
stack<\/a><\/div>\n
title<\/a><\/div>\n
width<\/a><\/div>\n
zIndex<\/a><\/div>\n<\/div>\n
\n

Methods<\/h3>\n
close<\/a><\/div>\n
destroy<\/a><\/div>\n
isOpen<\/a><\/div>\n
moveToTop<\/a><\/div>\n
open<\/a><\/div>\n
option<\/a><\/div>\n
widget<\/a><\/div>\n<\/div>\n
\n

Events<\/h3>\n
beforeClose<\/a><\/div>\n
close<\/a><\/div>\n
create<\/a><\/div>\n
drag<\/a><\/div>\n
dragStart<\/a><\/div>\n
dragStop<\/a><\/div>\n
focus<\/a><\/div>\n
open<\/a><\/div>\n
resize<\/a><\/div>\n
resizeStart<\/a><\/div>\n
resizeStop<\/a><\/div>\n<\/div><\/section>
\n\t\t

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\n\t\t

If the content length exceeds the maximum height, a scrollbar will automatically appear.<\/p>\n\n\t\t

A bottom button bar and semi-transparent modal overlay layer are common options that can be added.<\/p>\n\n\t\t

Dependencies<\/h3>\n\t\t