5.4/javascript/new-api_dialogs/index.html

   1
   2 <!doctype html>
   3 <html lang="en" class="no-js">
   4   <head>
   5
   6       <meta charset="utf-8">
   7       <meta name="viewport" content="width=device-width,initial-scale=1">
   8
   9
  10
  11
  12         <link rel="canonical" href="https://docs.woltlab.com/5.4/javascript/new-api_dialogs/">
  13
  14       <link rel="icon" href="../../assets/default.favicon.ico">
  15       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.1.2">
  16
  17
  18
  19         <title>Dialogs - WoltLab Suite Documentation</title>
  20
  21
  22
  23       <link rel="stylesheet" href="../../assets/stylesheets/main.6f955dcd.min.css">
  24
  25
  26         <link rel="stylesheet" href="../../assets/stylesheets/palette.ef6f36e2.min.css">
  27
  28
  29
  30           <meta name="theme-color" content="#009485">
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40       <link rel="stylesheet" href="../../stylesheets/extra.css">
  41
  42
  43
  44
  45
  46   </head>
  47
  48
  49
  50
  51
  52
  53
  54     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  55
  56
  57     <script>function __prefix(e){return new URL("../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
  58
  59     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  60     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  61     <label class="md-overlay" for="__drawer"></label>
  62     <div data-md-component="skip">
  63
  64
  65         <a href="#dialogs-javascript-api" class="md-skip">
  66           Skip to content
  67         </a>
  68
  69     </div>
  70     <div data-md-component="announce">
  71
  72         <aside class="md-announce">
  73           <div class="md-announce__inner md-grid md-typeset">
  74
  75     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  76
  77           </div>
  78         </aside>
  79
  80     </div>
  81
  82       <header class="md-header" data-md-component="header">
  83   <nav class="md-header__inner md-grid" aria-label="Header">
  84     <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
  85
  86   <img src="../../assets/logo.png" alt="logo">
  87
  88     </a>
  89     <label class="md-header__button md-icon" for="__drawer">
  90       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
  91     </label>
  92     <div class="md-header__title" data-md-component="header-title">
  93       <div class="md-header__ellipsis">
  94         <div class="md-header__topic">
  95           <span class="md-ellipsis">
  96             WoltLab Suite Documentation
  97           </span>
  98         </div>
  99         <div class="md-header__topic" data-md-component="header-topic">
 100           <span class="md-ellipsis">
 101
 102               Dialogs
 103
 104           </span>
 105         </div>
 106       </div>
 107     </div>
 108
 109
 110
 111       <label class="md-header__button md-icon" for="__search">
 112         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 113       </label>
 114
 115 <div class="md-search" data-md-component="search" role="dialog">
 116   <label class="md-search__overlay" for="__search"></label>
 117   <div class="md-search__inner" role="search">
 118     <form class="md-search__form" name="search">
 119       <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
 120       <label class="md-search__icon md-icon" for="__search">
 121         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 122         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
 123       </label>
 124       <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
 125         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
 126       </button>
 127     </form>
 128     <div class="md-search__output">
 129       <div class="md-search__scrollwrap" data-md-scrollfix>
 130         <div class="md-search-result" data-md-component="search-result">
 131           <div class="md-search-result__meta">
 132             Initializing search
 133           </div>
 134           <ol class="md-search-result__list"></ol>
 135         </div>
 136       </div>
 137     </div>
 138   </div>
 139 </div>
 140
 141
 142       <div class="md-header__source">
 143
 144 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 145   <div class="md-source__icon md-icon">
 146
 147     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 148   </div>
 149   <div class="md-source__repository">
 150     GitHub
 151   </div>
 152 </a>
 153       </div>
 154
 155   </nav>
 156 </header>
 157
 158     <div class="md-container" data-md-component="container">
 159
 160
 161
 162
 163       <main class="md-main" data-md-component="main">
 164         <div class="md-main__inner md-grid">
 165
 166
 167
 168               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 169                 <div class="md-sidebar__scrollwrap">
 170                   <div class="md-sidebar__inner">
 171
 172
 173
 174 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 175   <label class="md-nav__title" for="__drawer">
 176     <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
 177
 178   <img src="../../assets/logo.png" alt="logo">
 179
 180     </a>
 181     WoltLab Suite Documentation
 182   </label>
 183
 184     <div class="md-nav__source">
 185
 186 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 187   <div class="md-source__icon md-icon">
 188
 189     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 190   </div>
 191   <div class="md-source__repository">
 192     GitHub
 193   </div>
 194 </a>
 195     </div>
 196
 197   <ul class="md-nav__list" data-md-scrollfix>
 198
 199
 200
 201
 202
 203
 204
 205
 206     <li class="md-nav__item">
 207       <a href="../../getting-started/" class="md-nav__link">
 208         Getting Started
 209       </a>
 210     </li>
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220
 221
 222     <li class="md-nav__item md-nav__item--nested">
 223
 224
 225         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 226
 227       <label class="md-nav__link" for="__nav_2">
 228         PHP API
 229         <span class="md-nav__icon md-icon"></span>
 230       </label>
 231       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 232         <label class="md-nav__title" for="__nav_2">
 233           <span class="md-nav__icon md-icon"></span>
 234           PHP API
 235         </label>
 236         <ul class="md-nav__list" data-md-scrollfix>
 237
 238
 239
 240
 241
 242     <li class="md-nav__item">
 243       <a href="../../php/pages/" class="md-nav__link">
 244         Pages
 245       </a>
 246     </li>
 247
 248
 249
 250
 251
 252
 253
 254     <li class="md-nav__item">
 255       <a href="../../php/database-objects/" class="md-nav__link">
 256         Database Objects
 257       </a>
 258     </li>
 259
 260
 261
 262
 263
 264
 265
 266     <li class="md-nav__item">
 267       <a href="../../php/database-access/" class="md-nav__link">
 268         Database Access
 269       </a>
 270     </li>
 271
 272
 273
 274
 275
 276
 277
 278     <li class="md-nav__item">
 279       <a href="../../php/exceptions/" class="md-nav__link">
 280         Exceptions
 281       </a>
 282     </li>
 283
 284
 285
 286
 287
 288
 289
 290
 291     <li class="md-nav__item md-nav__item--nested">
 292
 293
 294         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 295
 296       <label class="md-nav__link" for="__nav_2_5">
 297         API
 298         <span class="md-nav__icon md-icon"></span>
 299       </label>
 300       <nav class="md-nav" aria-label="API" data-md-level="2">
 301         <label class="md-nav__title" for="__nav_2_5">
 302           <span class="md-nav__icon md-icon"></span>
 303           API
 304         </label>
 305         <ul class="md-nav__list" data-md-scrollfix>
 306
 307
 308
 309
 310
 311
 312     <li class="md-nav__item md-nav__item--nested">
 313
 314
 315         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_1" type="checkbox" id="__nav_2_5_1" >
 316
 317       <label class="md-nav__link" for="__nav_2_5_1">
 318         Caches
 319         <span class="md-nav__icon md-icon"></span>
 320       </label>
 321       <nav class="md-nav" aria-label="Caches" data-md-level="3">
 322         <label class="md-nav__title" for="__nav_2_5_1">
 323           <span class="md-nav__icon md-icon"></span>
 324           Caches
 325         </label>
 326         <ul class="md-nav__list" data-md-scrollfix>
 327
 328
 329
 330
 331
 332     <li class="md-nav__item">
 333       <a href="../../php/api/caches/" class="md-nav__link">
 334         Overview
 335       </a>
 336     </li>
 337
 338
 339
 340
 341
 342
 343
 344     <li class="md-nav__item">
 345       <a href="../../php/api/caches_persistent-caches/" class="md-nav__link">
 346         Persistent Caches
 347       </a>
 348     </li>
 349
 350
 351
 352
 353
 354
 355
 356     <li class="md-nav__item">
 357       <a href="../../php/api/caches_runtime-caches/" class="md-nav__link">
 358         Runtime Caches
 359       </a>
 360     </li>
 361
 362
 363
 364         </ul>
 365       </nav>
 366     </li>
 367
 368
 369
 370
 371
 372
 373
 374     <li class="md-nav__item">
 375       <a href="../../php/api/comments/" class="md-nav__link">
 376         Comments
 377       </a>
 378     </li>
 379
 380
 381
 382
 383
 384
 385
 386     <li class="md-nav__item">
 387       <a href="../../php/api/cronjobs/" class="md-nav__link">
 388         Cronjobs
 389       </a>
 390     </li>
 391
 392
 393
 394
 395
 396
 397
 398     <li class="md-nav__item">
 399       <a href="../../php/api/events/" class="md-nav__link">
 400         Events
 401       </a>
 402     </li>
 403
 404
 405
 406
 407
 408
 409
 410
 411     <li class="md-nav__item md-nav__item--nested">
 412
 413
 414         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 415
 416       <label class="md-nav__link" for="__nav_2_5_5">
 417         Form Builder
 418         <span class="md-nav__icon md-icon"></span>
 419       </label>
 420       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 421         <label class="md-nav__title" for="__nav_2_5_5">
 422           <span class="md-nav__icon md-icon"></span>
 423           Form Builder
 424         </label>
 425         <ul class="md-nav__list" data-md-scrollfix>
 426
 427
 428
 429
 430
 431     <li class="md-nav__item">
 432       <a href="../../php/api/form_builder/overview/" class="md-nav__link">
 433         Overview
 434       </a>
 435     </li>
 436
 437
 438
 439
 440
 441
 442
 443     <li class="md-nav__item">
 444       <a href="../../php/api/form_builder/structure/" class="md-nav__link">
 445         Structure
 446       </a>
 447     </li>
 448
 449
 450
 451
 452
 453
 454
 455     <li class="md-nav__item">
 456       <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
 457         Fields
 458       </a>
 459     </li>
 460
 461
 462
 463
 464
 465
 466
 467     <li class="md-nav__item">
 468       <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
 469         Validation and Data
 470       </a>
 471     </li>
 472
 473
 474
 475
 476
 477
 478
 479     <li class="md-nav__item">
 480       <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
 481         Dependencies
 482       </a>
 483     </li>
 484
 485
 486
 487         </ul>
 488       </nav>
 489     </li>
 490
 491
 492
 493
 494
 495
 496
 497     <li class="md-nav__item">
 498       <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
 499         Package Installation Plugins
 500       </a>
 501     </li>
 502
 503
 504
 505
 506
 507
 508
 509     <li class="md-nav__item">
 510       <a href="../../php/api/user_activity_points/" class="md-nav__link">
 511         User Activity Points
 512       </a>
 513     </li>
 514
 515
 516
 517
 518
 519
 520
 521     <li class="md-nav__item">
 522       <a href="../../php/api/user_notifications/" class="md-nav__link">
 523         User Notifications
 524       </a>
 525     </li>
 526
 527
 528
 529
 530
 531
 532
 533     <li class="md-nav__item">
 534       <a href="../../php/api/sitemaps/" class="md-nav__link">
 535         Sitemaps
 536       </a>
 537     </li>
 538
 539
 540
 541         </ul>
 542       </nav>
 543     </li>
 544
 545
 546
 547
 548
 549
 550
 551     <li class="md-nav__item">
 552       <a href="../../php/code-style/" class="md-nav__link">
 553         Code Style
 554       </a>
 555     </li>
 556
 557
 558
 559
 560
 561
 562
 563     <li class="md-nav__item">
 564       <a href="../../php/apps/" class="md-nav__link">
 565         Apps
 566       </a>
 567     </li>
 568
 569
 570
 571
 572
 573
 574
 575     <li class="md-nav__item">
 576       <a href="../../php/gdpr/" class="md-nav__link">
 577         GDPR
 578       </a>
 579     </li>
 580
 581
 582
 583         </ul>
 584       </nav>
 585     </li>
 586
 587
 588
 589
 590
 591
 592
 593
 594
 595
 596
 597     <li class="md-nav__item md-nav__item--nested">
 598
 599
 600         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
 601
 602       <label class="md-nav__link" for="__nav_3">
 603         Languages, Templates & CSS
 604         <span class="md-nav__icon md-icon"></span>
 605       </label>
 606       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 607         <label class="md-nav__title" for="__nav_3">
 608           <span class="md-nav__icon md-icon"></span>
 609           Languages, Templates & CSS
 610         </label>
 611         <ul class="md-nav__list" data-md-scrollfix>
 612
 613
 614
 615
 616
 617     <li class="md-nav__item">
 618       <a href="../../view/languages/" class="md-nav__link">
 619         Languages
 620       </a>
 621     </li>
 622
 623
 624
 625
 626
 627
 628
 629     <li class="md-nav__item">
 630       <a href="../../view/templates/" class="md-nav__link">
 631         Templates
 632       </a>
 633     </li>
 634
 635
 636
 637
 638
 639
 640
 641     <li class="md-nav__item">
 642       <a href="../../view/template-plugins/" class="md-nav__link">
 643         Template Plugins
 644       </a>
 645     </li>
 646
 647
 648
 649
 650
 651
 652
 653     <li class="md-nav__item">
 654       <a href="../../view/css/" class="md-nav__link">
 655         CSS
 656       </a>
 657     </li>
 658
 659
 660
 661         </ul>
 662       </nav>
 663     </li>
 664
 665
 666
 667
 668
 669
 670
 671
 672
 673
 674
 675
 676
 677     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 678
 679
 680         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" checked>
 681
 682       <label class="md-nav__link" for="__nav_4">
 683         TypeScript and JavaScript API
 684         <span class="md-nav__icon md-icon"></span>
 685       </label>
 686       <nav class="md-nav" aria-label="TypeScript and JavaScript API" data-md-level="1">
 687         <label class="md-nav__title" for="__nav_4">
 688           <span class="md-nav__icon md-icon"></span>
 689           TypeScript and JavaScript API
 690         </label>
 691         <ul class="md-nav__list" data-md-scrollfix>
 692
 693
 694
 695
 696
 697     <li class="md-nav__item">
 698       <a href="../general-usage/" class="md-nav__link">
 699         General Usage
 700       </a>
 701     </li>
 702
 703
 704
 705
 706
 707
 708
 709     <li class="md-nav__item">
 710       <a href="../typescript/" class="md-nav__link">
 711         TypeScript
 712       </a>
 713     </li>
 714
 715
 716
 717
 718
 719
 720
 721
 722
 723
 724     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 725
 726
 727         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" checked>
 728
 729       <label class="md-nav__link" for="__nav_4_3">
 730         New API
 731         <span class="md-nav__icon md-icon"></span>
 732       </label>
 733       <nav class="md-nav" aria-label="New API" data-md-level="2">
 734         <label class="md-nav__title" for="__nav_4_3">
 735           <span class="md-nav__icon md-icon"></span>
 736           New API
 737         </label>
 738         <ul class="md-nav__list" data-md-scrollfix>
 739
 740
 741
 742
 743
 744     <li class="md-nav__item">
 745       <a href="../new-api_writing-a-module/" class="md-nav__link">
 746         Writing a module
 747       </a>
 748     </li>
 749
 750
 751
 752
 753
 754
 755
 756     <li class="md-nav__item">
 757       <a href="../new-api_data-structures/" class="md-nav__link">
 758         Data Structures
 759       </a>
 760     </li>
 761
 762
 763
 764
 765
 766
 767
 768     <li class="md-nav__item">
 769       <a href="../new-api_core/" class="md-nav__link">
 770         Core Functions
 771       </a>
 772     </li>
 773
 774
 775
 776
 777
 778
 779
 780     <li class="md-nav__item">
 781       <a href="../new-api_dom/" class="md-nav__link">
 782         DOM
 783       </a>
 784     </li>
 785
 786
 787
 788
 789
 790
 791
 792     <li class="md-nav__item">
 793       <a href="../new-api_events/" class="md-nav__link">
 794         Event Handling
 795       </a>
 796     </li>
 797
 798
 799
 800
 801
 802
 803
 804     <li class="md-nav__item">
 805       <a href="../new-api_ajax/" class="md-nav__link">
 806         Ajax
 807       </a>
 808     </li>
 809
 810
 811
 812
 813
 814
 815
 816
 817
 818     <li class="md-nav__item md-nav__item--active">
 819
 820       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 821
 822
 823
 824
 825
 826         <label class="md-nav__link md-nav__link--active" for="__toc">
 827           Dialogs
 828           <span class="md-nav__icon md-icon"></span>
 829         </label>
 830
 831       <a href="./" class="md-nav__link md-nav__link--active">
 832         Dialogs
 833       </a>
 834
 835
 836 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 837
 838
 839
 840
 841
 842
 843     <label class="md-nav__title" for="__toc">
 844       <span class="md-nav__icon md-icon"></span>
 845       Table of contents
 846     </label>
 847     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 848
 849         <li class="md-nav__item">
 850   <a href="#introduction" class="md-nav__link">
 851     Introduction
 852   </a>
 853
 854 </li>
 855
 856         <li class="md-nav__item">
 857   <a href="#_dialogsetup" class="md-nav__link">
 858     _dialogSetup()
 859   </a>
 860
 861     <nav class="md-nav" aria-label="_dialogSetup()">
 862       <ul class="md-nav__list">
 863
 864           <li class="md-nav__item">
 865   <a href="#id-string" class="md-nav__link">
 866     id: string
 867   </a>
 868
 869 </li>
 870
 871           <li class="md-nav__item">
 872   <a href="#source-any" class="md-nav__link">
 873     source: any
 874   </a>
 875
 876 </li>
 877
 878           <li class="md-nav__item">
 879   <a href="#options-object" class="md-nav__link">
 880     options: Object
 881   </a>
 882
 883     <nav class="md-nav" aria-label="options: Object">
 884       <ul class="md-nav__list">
 885
 886           <li class="md-nav__item">
 887   <a href="#optionsbackdropcloseonclick-boolean" class="md-nav__link">
 888     options.backdropCloseOnClick: boolean
 889   </a>
 890
 891 </li>
 892
 893           <li class="md-nav__item">
 894   <a href="#optionsclosable-boolean" class="md-nav__link">
 895     options.closable: boolean
 896   </a>
 897
 898 </li>
 899
 900           <li class="md-nav__item">
 901   <a href="#optionsclosebuttonlabel-string" class="md-nav__link">
 902     options.closeButtonLabel: string
 903   </a>
 904
 905 </li>
 906
 907           <li class="md-nav__item">
 908   <a href="#optionscloseconfirmmessage-string" class="md-nav__link">
 909     options.closeConfirmMessage: string
 910   </a>
 911
 912 </li>
 913
 914           <li class="md-nav__item">
 915   <a href="#optionstitle-string" class="md-nav__link">
 916     options.title: string
 917   </a>
 918
 919 </li>
 920
 921           <li class="md-nav__item">
 922   <a href="#optionsonbeforeclose-id-string-void" class="md-nav__link">
 923     options.onBeforeClose: (id: string) =&gt; void
 924   </a>
 925
 926 </li>
 927
 928           <li class="md-nav__item">
 929   <a href="#optionsonclose-id-string-void" class="md-nav__link">
 930     options.onClose: (id: string) =&gt; void
 931   </a>
 932
 933 </li>
 934
 935           <li class="md-nav__item">
 936   <a href="#optionsonshow-content-element-void" class="md-nav__link">
 937     options.onShow: (content: Element) =&gt; void
 938   </a>
 939
 940 </li>
 941
 942       </ul>
 943     </nav>
 944
 945 </li>
 946
 947       </ul>
 948     </nav>
 949
 950 </li>
 951
 952         <li class="md-nav__item">
 953   <a href="#settitleid-string-object-title-string" class="md-nav__link">
 954     setTitle(id: string | Object, title: string)
 955   </a>
 956
 957 </li>
 958
 959         <li class="md-nav__item">
 960   <a href="#setcallbackid-string-object-key-string-value-data-any-void-null" class="md-nav__link">
 961     setCallback(id: string | Object, key: string, value: (data: any) =&gt; void | null)
 962   </a>
 963
 964 </li>
 965
 966         <li class="md-nav__item">
 967   <a href="#rebuildid-string-object" class="md-nav__link">
 968     rebuild(id: string | Object)
 969   </a>
 970
 971 </li>
 972
 973         <li class="md-nav__item">
 974   <a href="#closeid-string-object" class="md-nav__link">
 975     close(id: string | Object)
 976   </a>
 977
 978 </li>
 979
 980         <li class="md-nav__item">
 981   <a href="#getdialogid-string-object-object" class="md-nav__link">
 982     getDialog(id: string | Object): Object
 983   </a>
 984
 985 </li>
 986
 987         <li class="md-nav__item">
 988   <a href="#isopenid-string-object-boolean" class="md-nav__link">
 989     isOpen(id: string | Object): boolean
 990   </a>
 991
 992 </li>
 993
 994     </ul>
 995
 996 </nav>
 997
 998     </li>
 999
1000
1001
1002
1003
1004
1005
1006     <li class="md-nav__item">
1007       <a href="../new-api_browser/" class="md-nav__link">
1008         Browser and Screen Sizes
1009       </a>
1010     </li>
1011
1012
1013
1014
1015
1016
1017
1018     <li class="md-nav__item">
1019       <a href="../new-api_ui/" class="md-nav__link">
1020         User Interface
1021       </a>
1022     </li>
1023
1024
1025
1026         </ul>
1027       </nav>
1028     </li>
1029
1030
1031
1032
1033
1034
1035
1036     <li class="md-nav__item">
1037       <a href="../legacy-api/" class="md-nav__link">
1038         Legacy API
1039       </a>
1040     </li>
1041
1042
1043
1044
1045
1046
1047
1048     <li class="md-nav__item">
1049       <a href="../helper-functions/" class="md-nav__link">
1050         Helper Functions
1051       </a>
1052     </li>
1053
1054
1055
1056
1057
1058
1059
1060     <li class="md-nav__item">
1061       <a href="../code-snippets/" class="md-nav__link">
1062         Code Snippets
1063       </a>
1064     </li>
1065
1066
1067
1068         </ul>
1069       </nav>
1070     </li>
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082     <li class="md-nav__item md-nav__item--nested">
1083
1084
1085         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
1086
1087       <label class="md-nav__link" for="__nav_5">
1088         Package Components
1089         <span class="md-nav__icon md-icon"></span>
1090       </label>
1091       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
1092         <label class="md-nav__title" for="__nav_5">
1093           <span class="md-nav__icon md-icon"></span>
1094           Package Components
1095         </label>
1096         <ul class="md-nav__list" data-md-scrollfix>
1097
1098
1099
1100
1101
1102     <li class="md-nav__item">
1103       <a href="../../package/package-xml/" class="md-nav__link">
1104         package.xml
1105       </a>
1106     </li>
1107
1108
1109
1110
1111
1112
1113
1114
1115     <li class="md-nav__item md-nav__item--nested">
1116
1117
1118         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
1119
1120       <label class="md-nav__link" for="__nav_5_2">
1121         PIPs
1122         <span class="md-nav__icon md-icon"></span>
1123       </label>
1124       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
1125         <label class="md-nav__title" for="__nav_5_2">
1126           <span class="md-nav__icon md-icon"></span>
1127           PIPs
1128         </label>
1129         <ul class="md-nav__list" data-md-scrollfix>
1130
1131
1132
1133
1134
1135     <li class="md-nav__item">
1136       <a href="../../package/pip/" class="md-nav__link">
1137         Overview
1138       </a>
1139     </li>
1140
1141
1142
1143
1144
1145
1146
1147     <li class="md-nav__item">
1148       <a href="../../package/pip/acl-option/" class="md-nav__link">
1149         aclOption
1150       </a>
1151     </li>
1152
1153
1154
1155
1156
1157
1158
1159     <li class="md-nav__item">
1160       <a href="../../package/pip/acp-menu/" class="md-nav__link">
1161         acpMenu
1162       </a>
1163     </li>
1164
1165
1166
1167
1168
1169
1170
1171     <li class="md-nav__item">
1172       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
1173         acpSearchProvider
1174       </a>
1175     </li>
1176
1177
1178
1179
1180
1181
1182
1183     <li class="md-nav__item">
1184       <a href="../../package/pip/acp-template/" class="md-nav__link">
1185         acpTemplate
1186       </a>
1187     </li>
1188
1189
1190
1191
1192
1193
1194
1195     <li class="md-nav__item">
1196       <a href="../../package/pip/bbcode/" class="md-nav__link">
1197         bbcode
1198       </a>
1199     </li>
1200
1201
1202
1203
1204
1205
1206
1207     <li class="md-nav__item">
1208       <a href="../../package/pip/box/" class="md-nav__link">
1209         box
1210       </a>
1211     </li>
1212
1213
1214
1215
1216
1217
1218
1219     <li class="md-nav__item">
1220       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1221         clipboardAction
1222       </a>
1223     </li>
1224
1225
1226
1227
1228
1229
1230
1231     <li class="md-nav__item">
1232       <a href="../../package/pip/core-object/" class="md-nav__link">
1233         coreObject
1234       </a>
1235     </li>
1236
1237
1238
1239
1240
1241
1242
1243     <li class="md-nav__item">
1244       <a href="../../package/pip/cronjob/" class="md-nav__link">
1245         cronjob
1246       </a>
1247     </li>
1248
1249
1250
1251
1252
1253
1254
1255     <li class="md-nav__item">
1256       <a href="../../package/pip/database/" class="md-nav__link">
1257         database
1258       </a>
1259     </li>
1260
1261
1262
1263
1264
1265
1266
1267     <li class="md-nav__item">
1268       <a href="../../package/pip/event-listener/" class="md-nav__link">
1269         eventListener
1270       </a>
1271     </li>
1272
1273
1274
1275
1276
1277
1278
1279     <li class="md-nav__item">
1280       <a href="../../package/pip/file/" class="md-nav__link">
1281         file
1282       </a>
1283     </li>
1284
1285
1286
1287
1288
1289
1290
1291     <li class="md-nav__item">
1292       <a href="../../package/pip/language/" class="md-nav__link">
1293         language
1294       </a>
1295     </li>
1296
1297
1298
1299
1300
1301
1302
1303     <li class="md-nav__item">
1304       <a href="../../package/pip/media-provider/" class="md-nav__link">
1305         mediaProvider
1306       </a>
1307     </li>
1308
1309
1310
1311
1312
1313
1314
1315     <li class="md-nav__item">
1316       <a href="../../package/pip/menu/" class="md-nav__link">
1317         menu
1318       </a>
1319     </li>
1320
1321
1322
1323
1324
1325
1326
1327     <li class="md-nav__item">
1328       <a href="../../package/pip/menu-item/" class="md-nav__link">
1329         menuItem
1330       </a>
1331     </li>
1332
1333
1334
1335
1336
1337
1338
1339     <li class="md-nav__item">
1340       <a href="../../package/pip/object-type/" class="md-nav__link">
1341         objectType
1342       </a>
1343     </li>
1344
1345
1346
1347
1348
1349
1350
1351     <li class="md-nav__item">
1352       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1353         objectTypeDefinition
1354       </a>
1355     </li>
1356
1357
1358
1359
1360
1361
1362
1363     <li class="md-nav__item">
1364       <a href="../../package/pip/option/" class="md-nav__link">
1365         option
1366       </a>
1367     </li>
1368
1369
1370
1371
1372
1373
1374
1375     <li class="md-nav__item">
1376       <a href="../../package/pip/page/" class="md-nav__link">
1377         page
1378       </a>
1379     </li>
1380
1381
1382
1383
1384
1385
1386
1387     <li class="md-nav__item">
1388       <a href="../../package/pip/pip/" class="md-nav__link">
1389         pip
1390       </a>
1391     </li>
1392
1393
1394
1395
1396
1397
1398
1399     <li class="md-nav__item">
1400       <a href="../../package/pip/script/" class="md-nav__link">
1401         script
1402       </a>
1403     </li>
1404
1405
1406
1407
1408
1409
1410
1411     <li class="md-nav__item">
1412       <a href="../../package/pip/smiley/" class="md-nav__link">
1413         smiley
1414       </a>
1415     </li>
1416
1417
1418
1419
1420
1421
1422
1423     <li class="md-nav__item">
1424       <a href="../../package/pip/sql/" class="md-nav__link">
1425         sql
1426       </a>
1427     </li>
1428
1429
1430
1431
1432
1433
1434
1435     <li class="md-nav__item">
1436       <a href="../../package/pip/style/" class="md-nav__link">
1437         style
1438       </a>
1439     </li>
1440
1441
1442
1443
1444
1445
1446
1447     <li class="md-nav__item">
1448       <a href="../../package/pip/template/" class="md-nav__link">
1449         template
1450       </a>
1451     </li>
1452
1453
1454
1455
1456
1457
1458
1459     <li class="md-nav__item">
1460       <a href="../../package/pip/template-listener/" class="md-nav__link">
1461         templateListener
1462       </a>
1463     </li>
1464
1465
1466
1467
1468
1469
1470
1471     <li class="md-nav__item">
1472       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1473         userGroupOption
1474       </a>
1475     </li>
1476
1477
1478
1479
1480
1481
1482
1483     <li class="md-nav__item">
1484       <a href="../../package/pip/user-menu/" class="md-nav__link">
1485         userMenu
1486       </a>
1487     </li>
1488
1489
1490
1491
1492
1493
1494
1495     <li class="md-nav__item">
1496       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1497         userNotificationEvent
1498       </a>
1499     </li>
1500
1501
1502
1503
1504
1505
1506
1507     <li class="md-nav__item">
1508       <a href="../../package/pip/user-option/" class="md-nav__link">
1509         userOption
1510       </a>
1511     </li>
1512
1513
1514
1515
1516
1517
1518
1519     <li class="md-nav__item">
1520       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1521         userProfileMenu
1522       </a>
1523     </li>
1524
1525
1526
1527         </ul>
1528       </nav>
1529     </li>
1530
1531
1532
1533
1534
1535
1536
1537     <li class="md-nav__item">
1538       <a href="../../package/database-php-api/" class="md-nav__link">
1539         Database PHP API
1540       </a>
1541     </li>
1542
1543
1544
1545         </ul>
1546       </nav>
1547     </li>
1548
1549
1550
1551
1552
1553
1554
1555
1556
1557
1558
1559     <li class="md-nav__item md-nav__item--nested">
1560
1561
1562         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1563
1564       <label class="md-nav__link" for="__nav_6">
1565         Migration
1566         <span class="md-nav__icon md-icon"></span>
1567       </label>
1568       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1569         <label class="md-nav__title" for="__nav_6">
1570           <span class="md-nav__icon md-icon"></span>
1571           Migration
1572         </label>
1573         <ul class="md-nav__list" data-md-scrollfix>
1574
1575
1576
1577
1578
1579
1580     <li class="md-nav__item md-nav__item--nested">
1581
1582
1583         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1584
1585       <label class="md-nav__link" for="__nav_6_1">
1586         Migrating from WSC 5.3
1587         <span class="md-nav__icon md-icon"></span>
1588       </label>
1589       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1590         <label class="md-nav__title" for="__nav_6_1">
1591           <span class="md-nav__icon md-icon"></span>
1592           Migrating from WSC 5.3
1593         </label>
1594         <ul class="md-nav__list" data-md-scrollfix>
1595
1596
1597
1598
1599
1600     <li class="md-nav__item">
1601       <a href="../../migration/wsc53/php/" class="md-nav__link">
1602         PHP API
1603       </a>
1604     </li>
1605
1606
1607
1608
1609
1610
1611
1612     <li class="md-nav__item">
1613       <a href="../../migration/wsc53/session/" class="md-nav__link">
1614         Session Handling and Authentication
1615       </a>
1616     </li>
1617
1618
1619
1620
1621
1622
1623
1624     <li class="md-nav__item">
1625       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
1626         TypeScript and JavaScript
1627       </a>
1628     </li>
1629
1630
1631
1632
1633
1634
1635
1636     <li class="md-nav__item">
1637       <a href="../../migration/wsc53/templates/" class="md-nav__link">
1638         Templates
1639       </a>
1640     </li>
1641
1642
1643
1644
1645
1646
1647
1648     <li class="md-nav__item">
1649       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
1650         Third Party Libraries
1651       </a>
1652     </li>
1653
1654
1655
1656         </ul>
1657       </nav>
1658     </li>
1659
1660
1661
1662
1663
1664
1665
1666
1667     <li class="md-nav__item md-nav__item--nested">
1668
1669
1670         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1671
1672       <label class="md-nav__link" for="__nav_6_2">
1673         Migrating from WSC 5.2
1674         <span class="md-nav__icon md-icon"></span>
1675       </label>
1676       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1677         <label class="md-nav__title" for="__nav_6_2">
1678           <span class="md-nav__icon md-icon"></span>
1679           Migrating from WSC 5.2
1680         </label>
1681         <ul class="md-nav__list" data-md-scrollfix>
1682
1683
1684
1685
1686
1687     <li class="md-nav__item">
1688       <a href="../../migration/wsc52/php/" class="md-nav__link">
1689         PHP API
1690       </a>
1691     </li>
1692
1693
1694
1695
1696
1697
1698
1699     <li class="md-nav__item">
1700       <a href="../../migration/wsc52/templates/" class="md-nav__link">
1701         Templates and Languages
1702       </a>
1703     </li>
1704
1705
1706
1707
1708
1709
1710
1711     <li class="md-nav__item">
1712       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
1713         Third Party Libraries
1714       </a>
1715     </li>
1716
1717
1718
1719         </ul>
1720       </nav>
1721     </li>
1722
1723
1724
1725
1726
1727
1728
1729
1730     <li class="md-nav__item md-nav__item--nested">
1731
1732
1733         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1734
1735       <label class="md-nav__link" for="__nav_6_3">
1736         Migrating from WSC 3.1
1737         <span class="md-nav__icon md-icon"></span>
1738       </label>
1739       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1740         <label class="md-nav__title" for="__nav_6_3">
1741           <span class="md-nav__icon md-icon"></span>
1742           Migrating from WSC 3.1
1743         </label>
1744         <ul class="md-nav__list" data-md-scrollfix>
1745
1746
1747
1748
1749
1750     <li class="md-nav__item">
1751       <a href="../../migration/wsc31/php/" class="md-nav__link">
1752         PHP API
1753       </a>
1754     </li>
1755
1756
1757
1758         </ul>
1759       </nav>
1760     </li>
1761
1762
1763
1764
1765
1766
1767
1768
1769     <li class="md-nav__item md-nav__item--nested">
1770
1771
1772         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1773
1774       <label class="md-nav__link" for="__nav_6_4">
1775         Migrating from WSC 3.0
1776         <span class="md-nav__icon md-icon"></span>
1777       </label>
1778       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1779         <label class="md-nav__title" for="__nav_6_4">
1780           <span class="md-nav__icon md-icon"></span>
1781           Migrating from WSC 3.0
1782         </label>
1783         <ul class="md-nav__list" data-md-scrollfix>
1784
1785
1786
1787
1788
1789     <li class="md-nav__item">
1790       <a href="../../migration/wsc30/php/" class="md-nav__link">
1791         PHP API
1792       </a>
1793     </li>
1794
1795
1796
1797
1798
1799
1800
1801     <li class="md-nav__item">
1802       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
1803         JavaScript API
1804       </a>
1805     </li>
1806
1807
1808
1809
1810
1811
1812
1813     <li class="md-nav__item">
1814       <a href="../../migration/wsc30/templates/" class="md-nav__link">
1815         Templates
1816       </a>
1817     </li>
1818
1819
1820
1821
1822
1823
1824
1825     <li class="md-nav__item">
1826       <a href="../../migration/wsc30/css/" class="md-nav__link">
1827         CSS
1828       </a>
1829     </li>
1830
1831
1832
1833
1834
1835
1836
1837     <li class="md-nav__item">
1838       <a href="../../migration/wsc30/package/" class="md-nav__link">
1839         Package Components
1840       </a>
1841     </li>
1842
1843
1844
1845         </ul>
1846       </nav>
1847     </li>
1848
1849
1850
1851
1852
1853
1854
1855
1856     <li class="md-nav__item md-nav__item--nested">
1857
1858
1859         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1860
1861       <label class="md-nav__link" for="__nav_6_5">
1862         Migrating from WCF 2.1
1863         <span class="md-nav__icon md-icon"></span>
1864       </label>
1865       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1866         <label class="md-nav__title" for="__nav_6_5">
1867           <span class="md-nav__icon md-icon"></span>
1868           Migrating from WCF 2.1
1869         </label>
1870         <ul class="md-nav__list" data-md-scrollfix>
1871
1872
1873
1874
1875
1876     <li class="md-nav__item">
1877       <a href="../../migration/wcf21/php/" class="md-nav__link">
1878         PHP API
1879       </a>
1880     </li>
1881
1882
1883
1884
1885
1886
1887
1888     <li class="md-nav__item">
1889       <a href="../../migration/wcf21/templates/" class="md-nav__link">
1890         Templates
1891       </a>
1892     </li>
1893
1894
1895
1896
1897
1898
1899
1900     <li class="md-nav__item">
1901       <a href="../../migration/wcf21/css/" class="md-nav__link">
1902         CSS
1903       </a>
1904     </li>
1905
1906
1907
1908
1909
1910
1911
1912     <li class="md-nav__item">
1913       <a href="../../migration/wcf21/package/" class="md-nav__link">
1914         Package Components
1915       </a>
1916     </li>
1917
1918
1919
1920         </ul>
1921       </nav>
1922     </li>
1923
1924
1925
1926         </ul>
1927       </nav>
1928     </li>
1929
1930
1931
1932
1933
1934
1935
1936
1937
1938
1939
1940     <li class="md-nav__item md-nav__item--nested">
1941
1942
1943         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1944
1945       <label class="md-nav__link" for="__nav_7">
1946         Tutorials
1947         <span class="md-nav__icon md-icon"></span>
1948       </label>
1949       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1950         <label class="md-nav__title" for="__nav_7">
1951           <span class="md-nav__icon md-icon"></span>
1952           Tutorials
1953         </label>
1954         <ul class="md-nav__list" data-md-scrollfix>
1955
1956
1957
1958
1959
1960
1961     <li class="md-nav__item md-nav__item--nested">
1962
1963
1964         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1965
1966       <label class="md-nav__link" for="__nav_7_1">
1967         Tutorial Series
1968         <span class="md-nav__icon md-icon"></span>
1969       </label>
1970       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1971         <label class="md-nav__title" for="__nav_7_1">
1972           <span class="md-nav__icon md-icon"></span>
1973           Tutorial Series
1974         </label>
1975         <ul class="md-nav__list" data-md-scrollfix>
1976
1977
1978
1979
1980
1981     <li class="md-nav__item">
1982       <a href="../../tutorial/series/overview/" class="md-nav__link">
1983         Overview
1984       </a>
1985     </li>
1986
1987
1988
1989
1990
1991
1992
1993     <li class="md-nav__item">
1994       <a href="../../tutorial/series/part_1/" class="md-nav__link">
1995         Part 1
1996       </a>
1997     </li>
1998
1999
2000
2001
2002
2003
2004
2005     <li class="md-nav__item">
2006       <a href="../../tutorial/series/part_2/" class="md-nav__link">
2007         Part 2
2008       </a>
2009     </li>
2010
2011
2012
2013
2014
2015
2016
2017     <li class="md-nav__item">
2018       <a href="../../tutorial/series/part_3/" class="md-nav__link">
2019         Part 3
2020       </a>
2021     </li>
2022
2023
2024
2025
2026
2027
2028
2029     <li class="md-nav__item">
2030       <a href="../../tutorial/series/part_4/" class="md-nav__link">
2031         Part 4
2032       </a>
2033     </li>
2034
2035
2036
2037
2038
2039
2040
2041     <li class="md-nav__item">
2042       <a href="../../tutorial/series/part_5/" class="md-nav__link">
2043         Part 5
2044       </a>
2045     </li>
2046
2047
2048
2049         </ul>
2050       </nav>
2051     </li>
2052
2053
2054
2055         </ul>
2056       </nav>
2057     </li>
2058
2059
2060
2061   </ul>
2062 </nav>
2063                   </div>
2064                 </div>
2065               </div>
2066
2067
2068
2069               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
2070                 <div class="md-sidebar__scrollwrap">
2071                   <div class="md-sidebar__inner">
2072
2073 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
2074
2075
2076
2077
2078
2079
2080     <label class="md-nav__title" for="__toc">
2081       <span class="md-nav__icon md-icon"></span>
2082       Table of contents
2083     </label>
2084     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
2085
2086         <li class="md-nav__item">
2087   <a href="#introduction" class="md-nav__link">
2088     Introduction
2089   </a>
2090
2091 </li>
2092
2093         <li class="md-nav__item">
2094   <a href="#_dialogsetup" class="md-nav__link">
2095     _dialogSetup()
2096   </a>
2097
2098     <nav class="md-nav" aria-label="_dialogSetup()">
2099       <ul class="md-nav__list">
2100
2101           <li class="md-nav__item">
2102   <a href="#id-string" class="md-nav__link">
2103     id: string
2104   </a>
2105
2106 </li>
2107
2108           <li class="md-nav__item">
2109   <a href="#source-any" class="md-nav__link">
2110     source: any
2111   </a>
2112
2113 </li>
2114
2115           <li class="md-nav__item">
2116   <a href="#options-object" class="md-nav__link">
2117     options: Object
2118   </a>
2119
2120     <nav class="md-nav" aria-label="options: Object">
2121       <ul class="md-nav__list">
2122
2123           <li class="md-nav__item">
2124   <a href="#optionsbackdropcloseonclick-boolean" class="md-nav__link">
2125     options.backdropCloseOnClick: boolean
2126   </a>
2127
2128 </li>
2129
2130           <li class="md-nav__item">
2131   <a href="#optionsclosable-boolean" class="md-nav__link">
2132     options.closable: boolean
2133   </a>
2134
2135 </li>
2136
2137           <li class="md-nav__item">
2138   <a href="#optionsclosebuttonlabel-string" class="md-nav__link">
2139     options.closeButtonLabel: string
2140   </a>
2141
2142 </li>
2143
2144           <li class="md-nav__item">
2145   <a href="#optionscloseconfirmmessage-string" class="md-nav__link">
2146     options.closeConfirmMessage: string
2147   </a>
2148
2149 </li>
2150
2151           <li class="md-nav__item">
2152   <a href="#optionstitle-string" class="md-nav__link">
2153     options.title: string
2154   </a>
2155
2156 </li>
2157
2158           <li class="md-nav__item">
2159   <a href="#optionsonbeforeclose-id-string-void" class="md-nav__link">
2160     options.onBeforeClose: (id: string) =&gt; void
2161   </a>
2162
2163 </li>
2164
2165           <li class="md-nav__item">
2166   <a href="#optionsonclose-id-string-void" class="md-nav__link">
2167     options.onClose: (id: string) =&gt; void
2168   </a>
2169
2170 </li>
2171
2172           <li class="md-nav__item">
2173   <a href="#optionsonshow-content-element-void" class="md-nav__link">
2174     options.onShow: (content: Element) =&gt; void
2175   </a>
2176
2177 </li>
2178
2179       </ul>
2180     </nav>
2181
2182 </li>
2183
2184       </ul>
2185     </nav>
2186
2187 </li>
2188
2189         <li class="md-nav__item">
2190   <a href="#settitleid-string-object-title-string" class="md-nav__link">
2191     setTitle(id: string | Object, title: string)
2192   </a>
2193
2194 </li>
2195
2196         <li class="md-nav__item">
2197   <a href="#setcallbackid-string-object-key-string-value-data-any-void-null" class="md-nav__link">
2198     setCallback(id: string | Object, key: string, value: (data: any) =&gt; void | null)
2199   </a>
2200
2201 </li>
2202
2203         <li class="md-nav__item">
2204   <a href="#rebuildid-string-object" class="md-nav__link">
2205     rebuild(id: string | Object)
2206   </a>
2207
2208 </li>
2209
2210         <li class="md-nav__item">
2211   <a href="#closeid-string-object" class="md-nav__link">
2212     close(id: string | Object)
2213   </a>
2214
2215 </li>
2216
2217         <li class="md-nav__item">
2218   <a href="#getdialogid-string-object-object" class="md-nav__link">
2219     getDialog(id: string | Object): Object
2220   </a>
2221
2222 </li>
2223
2224         <li class="md-nav__item">
2225   <a href="#isopenid-string-object-boolean" class="md-nav__link">
2226     isOpen(id: string | Object): boolean
2227   </a>
2228
2229 </li>
2230
2231     </ul>
2232
2233 </nav>
2234                   </div>
2235                 </div>
2236               </div>
2237
2238
2239           <div class="md-content" data-md-component="content">
2240             <article class="md-content__inner md-typeset">
2241
2242
2243                   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/javascript/new-api_dialogs.md" title="Edit this page" class="md-content__button md-icon">
2244                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
2245                   </a>
2246
2247
2248                 <h1 id="dialogs-javascript-api">Dialogs - JavaScript API<a class="headerlink" href="#dialogs-javascript-api" title="Permanent link">#</a></h1>
2249 <h2 id="introduction">Introduction<a class="headerlink" href="#introduction" title="Permanent link">#</a></h2>
2250 <p>Dialogs are full screen overlays that cover the currently visible window area
2251 using a semi-opague backdrop and a prominently placed dialog window in the
2252 foreground. They shift the attention away from the original content towards the
2253 dialog and usually contain additional details and/or dedicated form inputs.</p>
2254 <h2 id="_dialogsetup"><code>_dialogSetup()</code><a class="headerlink" href="#_dialogsetup" title="Permanent link">#</a></h2>
2255 <p>The lazy initialization is performed upon the first invocation from the callee,
2256 using the magic <code>_dialogSetup()</code> method to retrieve the basic configuration for
2257 the dialog construction and any event callbacks.</p>
2258 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
2259 <span class="normal"> 2</span>
2260 <span class="normal"> 3</span>
2261 <span class="normal"> 4</span>
2262 <span class="normal"> 5</span>
2263 <span class="normal"> 6</span>
2264 <span class="normal"> 7</span>
2265 <span class="normal"> 8</span>
2266 <span class="normal"> 9</span>
2267 <span class="normal">10</span>
2268 <span class="normal">11</span>
2269 <span class="normal">12</span>
2270 <span class="normal">13</span>
2271 <span class="normal">14</span>
2272 <span class="normal">15</span>
2273 <span class="normal">16</span>
2274 <span class="normal">17</span>
2275 <span class="normal">18</span>
2276 <span class="normal">19</span>
2277 <span class="normal">20</span>
2278 <span class="normal">21</span>
2279 <span class="normal">22</span>
2280 <span class="normal">23</span>
2281 <span class="normal">24</span>
2282 <span class="normal">25</span>
2283 <span class="normal">26</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="c1">// App/Foo.js</span>
2284 <span class="nx">define</span><span class="p">([</span><span class="s2">&quot;Ui/Dialog&quot;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">UiDialog</span><span class="p">)</span> <span class="p">{</span>
2285   <span class="s2">&quot;use strict&quot;</span><span class="p">;</span>
2286
2287   <span class="kd">function</span> <span class="nx">Foo</span><span class="p">()</span> <span class="p">{};</span>
2288   <span class="nx">Foo</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span>
2289     <span class="nx">bar</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2290       <span class="c1">// this will open the dialog constructed by _dialogSetup</span>
2291       <span class="nx">UiDialog</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
2292     <span class="p">},</span>
2293
2294     <span class="nx">_dialogSetup</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2295       <span class="k">return</span> <span class="p">{</span>
2296         <span class="nx">id</span><span class="o">:</span> <span class="s2">&quot;myDialog&quot;</span><span class="p">,</span>
2297         <span class="nx">source</span><span class="o">:</span> <span class="s2">&quot;&lt;p&gt;Hello World!&lt;/p&gt;&quot;</span><span class="p">,</span>
2298         <span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
2299           <span class="nx">onClose</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2300             <span class="c1">// the fancy dialog was closed!</span>
2301           <span class="p">}</span>
2302         <span class="p">}</span>
2303       <span class="p">}</span>
2304     <span class="p">}</span>
2305   <span class="p">};</span>
2306
2307   <span class="k">return</span> <span class="nx">Foo</span><span class="p">;</span>
2308 <span class="p">});</span>
2309 </code></pre></div>
2310 </td></tr></table>
2311 <h3 id="id-string"><code>id: string</code><a class="headerlink" href="#id-string" title="Permanent link">#</a></h3>
2312 <p>The <code>id</code> is used to identify a dialog on runtime, but is also part of the first-
2313 time setup when the dialog has not been opened before. If <code>source</code> is <code>undefined</code>,
2314 the module attempts to construct the dialog using an element with the same id.</p>
2315 <h3 id="source-any"><code>source: any</code><a class="headerlink" href="#source-any" title="Permanent link">#</a></h3>
2316 <p>There are six different types of value that <code>source</code> does allow and each of them
2317 changes how the initial dialog is constructed:</p>
2318 <ol>
2319 <li><code>undefined</code><br />
2320   The dialog exists already and the value of <code>id</code> should be used to identify the
2321   element.</li>
2322 <li><code>null</code><br />
2323   The HTML is provided using the second argument of <code>.open()</code>.</li>
2324 <li><code>() =&gt; void</code><br />
2325   If the <code>source</code> is a function, it is executed and is expected to start the
2326   dialog initialization itself.</li>
2327 <li><code>Object</code><br />
2328   Plain objects are interpreted as parameters for an Ajax request, in particular
2329   <code>source.data</code> will be used to issue the request. It is possible to specify the
2330   key <code>source.after</code> as a callback <code>(content: Element, responseData: Object) =&gt; void</code>
2331   that is executed after the dialog was opened.</li>
2332 <li><code>string</code><br />
2333   The string is expected to be plain HTML that should be used to construct the
2334   dialog.</li>
2335 <li><code>DocumentFragment</code><br />
2336   A new container <code>&lt;div&gt;</code> with the provided <code>id</code> is created and the contents of
2337   the <code>DocumentFragment</code> is appended to it. This container is then used for the
2338   dialog.</li>
2339 </ol>
2340 <h3 id="options-object"><code>options: Object</code><a class="headerlink" href="#options-object" title="Permanent link">#</a></h3>
2341 <p>All configuration options and callbacks are handled through this object.</p>
2342 <h4 id="optionsbackdropcloseonclick-boolean"><code>options.backdropCloseOnClick: boolean</code><a class="headerlink" href="#optionsbackdropcloseonclick-boolean" title="Permanent link">#</a></h4>
2343 <p><em>Defaults to <code>true</code>.</em></p>
2344 <p>Clicks on the dialog backdrop will close the top-most dialog. This option will
2345 be force-disabled if the option <code>closeable</code> is set to <code>false</code>.</p>
2346 <h4 id="optionsclosable-boolean"><code>options.closable: boolean</code><a class="headerlink" href="#optionsclosable-boolean" title="Permanent link">#</a></h4>
2347 <p><em>Defaults to <code>true</code>.</em></p>
2348 <p>Enables the close button in the dialog title, when disabled the dialog can be
2349 closed through the <code>.close()</code> API call only.</p>
2350 <h4 id="optionsclosebuttonlabel-string"><code>options.closeButtonLabel: string</code><a class="headerlink" href="#optionsclosebuttonlabel-string" title="Permanent link">#</a></h4>
2351 <p><em>Defaults to <code>Language.get("wcf.global.button.close")</code>.</em></p>
2352 <p>The phrase that is displayed in the tooltip for the close button.</p>
2353 <h4 id="optionscloseconfirmmessage-string"><code>options.closeConfirmMessage: string</code><a class="headerlink" href="#optionscloseconfirmmessage-string" title="Permanent link">#</a></h4>
2354 <p><em>Defaults to <code>""</code>.</em></p>
2355 <p>Shows a <a href="../new-api_ui/">confirmation dialog</a> using the configured message
2356 before closing the dialog. The dialog will not be closed if the dialog is
2357 rejected by the user.</p>
2358 <h4 id="optionstitle-string"><code>options.title: string</code><a class="headerlink" href="#optionstitle-string" title="Permanent link">#</a></h4>
2359 <p><em>Defaults to <code>""</code>.</em></p>
2360 <p>The phrase that is displayed in the dialog title.</p>
2361 <h4 id="optionsonbeforeclose-id-string-void"><code>options.onBeforeClose: (id: string) =&gt; void</code><a class="headerlink" href="#optionsonbeforeclose-id-string-void" title="Permanent link">#</a></h4>
2362 <p><em>Defaults to <code>null</code>.</em></p>
2363 <p>The callback is executed when the user clicks on the close button or, if enabled,
2364 on the backdrop. The callback is responsible to close the dialog by itself, the
2365 default close behavior is automatically prevented.</p>
2366 <h4 id="optionsonclose-id-string-void"><code>options.onClose: (id: string) =&gt; void</code><a class="headerlink" href="#optionsonclose-id-string-void" title="Permanent link">#</a></h4>
2367 <p><em>Defaults to <code>null</code>.</em></p>
2368 <p>The callback is notified once the dialog is about to be closed, but is still
2369 visible at this point. It is not possible to abort the close operation at this
2370 point.</p>
2371 <h4 id="optionsonshow-content-element-void"><code>options.onShow: (content: Element) =&gt; void</code><a class="headerlink" href="#optionsonshow-content-element-void" title="Permanent link">#</a></h4>
2372 <p><em>Defaults to <code>null</code>.</em></p>
2373 <p>Receives the dialog content element as its only argument, allowing the callback
2374 to modify the DOM or to register event listeners before the dialog is presented
2375 to the user. The dialog is already visible at call time, but the dialog has not
2376 been finalized yet.</p>
2377 <h2 id="settitleid-string-object-title-string"><code>setTitle(id: string | Object, title: string)</code><a class="headerlink" href="#settitleid-string-object-title-string" title="Permanent link">#</a></h2>
2378 <p>Sets the title of a dialog.</p>
2379 <h2 id="setcallbackid-string-object-key-string-value-data-any-void-null"><code>setCallback(id: string | Object, key: string, value: (data: any) =&gt; void | null)</code><a class="headerlink" href="#setcallbackid-string-object-key-string-value-data-any-void-null" title="Permanent link">#</a></h2>
2380 <p>Sets a callback function after the dialog initialization, the special value
2381 <code>null</code> will remove a previously set callback. Valid values for <code>key</code> are
2382 <code>onBeforeClose</code>, <code>onClose</code> and <code>onShow</code>.</p>
2383 <h2 id="rebuildid-string-object"><code>rebuild(id: string | Object)</code><a class="headerlink" href="#rebuildid-string-object" title="Permanent link">#</a></h2>
2384 <p>Rebuilds a dialog by performing various calculations on the maximum dialog
2385 height in regards to the overflow handling and adjustments for embedded forms.
2386 This method is automatically invoked whenever a dialog is shown, after invoking
2387 the <code>options.onShow</code> callback.</p>
2388 <h2 id="closeid-string-object"><code>close(id: string | Object)</code><a class="headerlink" href="#closeid-string-object" title="Permanent link">#</a></h2>
2389 <p>Closes an open dialog, this will neither trigger a confirmation dialog, nor does
2390 it invoke the <code>options.onBeforeClose</code> callback. The <code>options.onClose</code> callback
2391 will always be invoked, but it cannot abort the close operation.</p>
2392 <h2 id="getdialogid-string-object-object"><code>getDialog(id: string | Object): Object</code><a class="headerlink" href="#getdialogid-string-object-object" title="Permanent link">#</a></h2>
2393 <div class="admonition warning">
2394 <p class="admonition-title">This method returns an internal data object by reference, any modifications made do have an effect on the dialogs behavior and in particular no validation is performed on the modification. It is strongly recommended to use the <code>.set*()</code> methods only.</p>
2395 </div>
2396 <p>Returns the internal dialog data that is attached to a dialog. The most important
2397 key is <code>.content</code> which holds a reference to the dialog's inner content element.</p>
2398 <h2 id="isopenid-string-object-boolean"><code>isOpen(id: string | Object): boolean</code><a class="headerlink" href="#isopenid-string-object-boolean" title="Permanent link">#</a></h2>
2399 <p>Returns true if the dialog exists and is open.</p>
2400
2401
2402
2403
2404 <hr>
2405 <div class="md-source-date">
2406   <small>
2407
2408       Last update: 2021-01-08
2409
2410   </small>
2411 </div>
2412
2413
2414
2415
2416
2417
2418
2419
2420             </article>
2421           </div>
2422         </div>
2423
2424       </main>
2425
2426
2427 <footer class="md-footer">
2428
2429     <nav class="md-footer__inner md-grid" aria-label="Footer">
2430
2431         <a href="../new-api_ajax/" class="md-footer__link md-footer__link--prev" rel="prev">
2432           <div class="md-footer__button md-icon">
2433             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
2434           </div>
2435           <div class="md-footer__title">
2436             <div class="md-ellipsis">
2437               <span class="md-footer__direction">
2438                 Previous
2439               </span>
2440               Ajax
2441             </div>
2442           </div>
2443         </a>
2444
2445
2446         <a href="../new-api_browser/" class="md-footer__link md-footer__link--next" rel="next">
2447           <div class="md-footer__title">
2448             <div class="md-ellipsis">
2449               <span class="md-footer__direction">
2450                 Next
2451               </span>
2452               Browser and Screen Sizes
2453             </div>
2454           </div>
2455           <div class="md-footer__button md-icon">
2456             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
2457           </div>
2458         </a>
2459
2460     </nav>
2461
2462   <div class="md-footer-meta md-typeset">
2463     <div class="md-footer-meta__inner md-grid">
2464       <div class="md-footer-copyright">
2465
2466           <div class="md-footer-copyright__highlight">
2467             Copyright © 2020 WoltLab GmbH
2468           </div>
2469
2470         Made with
2471         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2472           Material for MkDocs
2473         </a>
2474
2475       </div>
2476       <div class="md-footer-copyright">
2477         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2478         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2479 </div>
2480     </div>
2481   </div>
2482 </footer>
2483
2484     </div>
2485     <div class="md-dialog" data-md-component="dialog">
2486       <div class="md-dialog__inner md-typeset"></div>
2487     </div>
2488     <script id="__config" type="application/json">{"base": "../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}, "search": "../../assets/javascripts/workers/search.fe42c31b.min.js", "version": {"provider": "mike"}}</script>
2489
2490
2491       <script src="../../assets/javascripts/bundle.4ea5477f.min.js"></script>
2492
2493
2494   </body>
2495 </html>