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