6.0/javascript/components_dialog/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         <link rel="canonical" href="https://docs.woltlab.com/6.0/javascript/components_dialog/">
  12
  13
  14         <link rel="prev" href="../components_confirmation/">
  15
  16
  17         <link rel="next" href="../components_google_maps/">
  18
  19       <link rel="icon" href="../../assets/default.favicon.ico">
  20       <meta name="generator" content="mkdocs-1.4.3, mkdocs-material-9.1.15">
  21
  22
  23
  24         <title>Dialog - WoltLab Suite Documentation</title>
  25
  26
  27
  28       <link rel="stylesheet" href="../../assets/stylesheets/main.26e3688c.min.css">
  29
  30
  31         <link rel="stylesheet" href="../../assets/stylesheets/palette.ecc896b0.min.css">
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41       <link rel="stylesheet" href="../../stylesheets/extra.css">
  42
  43     <script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
  44
  45
  46
  47
  48
  49
  50   </head>
  51
  52
  53
  54
  55
  56
  57
  58     <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="teal" data-md-color-accent="indigo">
  59
  60
  61
  62     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  63     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  64     <label class="md-overlay" for="__drawer"></label>
  65     <div data-md-component="skip">
  66
  67
  68         <a href="#dialogs-javascript-api" class="md-skip">
  69           Skip to content
  70         </a>
  71
  72     </div>
  73     <div data-md-component="announce">
  74
  75         <aside class="md-banner">
  76           <div class="md-banner__inner md-grid md-typeset">
  77
  78
  79     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  80
  81           </div>
  82
  83         </aside>
  84
  85     </div>
  86
  87       <div data-md-color-scheme="default" data-md-component="outdated" hidden>
  88
  89       </div>
  90
  91
  92
  93
  94
  95
  96 <header class="md-header md-header--shadow" data-md-component="header">
  97   <nav class="md-header__inner md-grid" aria-label="Header">
  98     <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
  99
 100   <img src="../../assets/logo.png" alt="logo">
 101
 102     </a>
 103     <label class="md-header__button md-icon" for="__drawer">
 104       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
 105     </label>
 106     <div class="md-header__title" data-md-component="header-title">
 107       <div class="md-header__ellipsis">
 108         <div class="md-header__topic">
 109           <span class="md-ellipsis">
 110             WoltLab Suite Documentation
 111           </span>
 112         </div>
 113         <div class="md-header__topic" data-md-component="header-topic">
 114           <span class="md-ellipsis">
 115
 116               Dialog
 117
 118           </span>
 119         </div>
 120       </div>
 121     </div>
 122
 123
 124
 125
 126
 127       <label class="md-header__button md-icon" for="__search">
 128         <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>
 129       </label>
 130       <div class="md-search" data-md-component="search" role="dialog">
 131   <label class="md-search__overlay" for="__search"></label>
 132   <div class="md-search__inner" role="search">
 133     <form class="md-search__form" name="search">
 134       <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" required>
 135       <label class="md-search__icon md-icon" for="__search">
 136         <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>
 137         <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>
 138       </label>
 139       <nav class="md-search__options" aria-label="Search">
 140
 141         <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
 142           <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>
 143         </button>
 144       </nav>
 145
 146     </form>
 147     <div class="md-search__output">
 148       <div class="md-search__scrollwrap" data-md-scrollfix>
 149         <div class="md-search-result" data-md-component="search-result">
 150           <div class="md-search-result__meta">
 151             Initializing search
 152           </div>
 153           <ol class="md-search-result__list" role="presentation"></ol>
 154         </div>
 155       </div>
 156     </div>
 157   </div>
 158 </div>
 159
 160
 161       <div class="md-header__source">
 162         <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 163   <div class="md-source__icon md-icon">
 164
 165     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><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>
 166   </div>
 167   <div class="md-source__repository">
 168     GitHub
 169   </div>
 170 </a>
 171       </div>
 172
 173   </nav>
 174
 175 </header>
 176
 177     <div class="md-container" data-md-component="container">
 178
 179
 180
 181
 182
 183
 184       <main class="md-main" data-md-component="main">
 185         <div class="md-main__inner md-grid">
 186
 187
 188
 189               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 190                 <div class="md-sidebar__scrollwrap">
 191                   <div class="md-sidebar__inner">
 192
 193
 194
 195 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 196   <label class="md-nav__title" for="__drawer">
 197     <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
 198
 199   <img src="../../assets/logo.png" alt="logo">
 200
 201     </a>
 202     WoltLab Suite Documentation
 203   </label>
 204
 205     <div class="md-nav__source">
 206       <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 207   <div class="md-source__icon md-icon">
 208
 209     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><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>
 210   </div>
 211   <div class="md-source__repository">
 212     GitHub
 213   </div>
 214 </a>
 215     </div>
 216
 217   <ul class="md-nav__list" data-md-scrollfix>
 218
 219
 220
 221
 222
 223
 224
 225
 226     <li class="md-nav__item">
 227       <a href="../../getting-started/" class="md-nav__link">
 228         Getting Started
 229       </a>
 230     </li>
 231
 232
 233
 234
 235
 236
 237
 238
 239
 240
 241
 242     <li class="md-nav__item md-nav__item--nested">
 243
 244
 245
 246
 247       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
 248
 249
 250
 251         <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
 252           PHP API
 253           <span class="md-nav__icon md-icon"></span>
 254         </label>
 255
 256       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
 257         <label class="md-nav__title" for="__nav_2">
 258           <span class="md-nav__icon md-icon"></span>
 259           PHP API
 260         </label>
 261         <ul class="md-nav__list" data-md-scrollfix>
 262
 263
 264
 265
 266
 267
 268     <li class="md-nav__item">
 269       <a href="../../php/pages/" class="md-nav__link">
 270         Pages
 271       </a>
 272     </li>
 273
 274
 275
 276
 277
 278
 279
 280
 281
 282     <li class="md-nav__item">
 283       <a href="../../php/database-objects/" class="md-nav__link">
 284         Database Objects
 285       </a>
 286     </li>
 287
 288
 289
 290
 291
 292
 293
 294
 295
 296     <li class="md-nav__item">
 297       <a href="../../php/database-access/" class="md-nav__link">
 298         Database Access
 299       </a>
 300     </li>
 301
 302
 303
 304
 305
 306
 307
 308
 309
 310     <li class="md-nav__item">
 311       <a href="../../php/exceptions/" class="md-nav__link">
 312         Exceptions
 313       </a>
 314     </li>
 315
 316
 317
 318
 319
 320
 321
 322
 323
 324
 325     <li class="md-nav__item md-nav__item--nested">
 326
 327
 328
 329
 330       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_5" >
 331
 332
 333
 334         <label class="md-nav__link" for="__nav_2_5" id="__nav_2_5_label" tabindex="0">
 335           API
 336           <span class="md-nav__icon md-icon"></span>
 337         </label>
 338
 339       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_5_label" aria-expanded="false">
 340         <label class="md-nav__title" for="__nav_2_5">
 341           <span class="md-nav__icon md-icon"></span>
 342           API
 343         </label>
 344         <ul class="md-nav__list" data-md-scrollfix>
 345
 346
 347
 348
 349
 350
 351
 352     <li class="md-nav__item md-nav__item--nested">
 353
 354
 355
 356
 357       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_5_1" >
 358
 359
 360
 361         <label class="md-nav__link" for="__nav_2_5_1" id="__nav_2_5_1_label" tabindex="0">
 362           Caches
 363           <span class="md-nav__icon md-icon"></span>
 364         </label>
 365
 366       <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_5_1_label" aria-expanded="false">
 367         <label class="md-nav__title" for="__nav_2_5_1">
 368           <span class="md-nav__icon md-icon"></span>
 369           Caches
 370         </label>
 371         <ul class="md-nav__list" data-md-scrollfix>
 372
 373
 374
 375
 376
 377
 378     <li class="md-nav__item">
 379       <a href="../../php/api/caches/" class="md-nav__link">
 380         Overview
 381       </a>
 382     </li>
 383
 384
 385
 386
 387
 388
 389
 390
 391
 392     <li class="md-nav__item">
 393       <a href="../../php/api/caches_persistent-caches/" class="md-nav__link">
 394         Persistent Caches
 395       </a>
 396     </li>
 397
 398
 399
 400
 401
 402
 403
 404
 405
 406     <li class="md-nav__item">
 407       <a href="../../php/api/caches_runtime-caches/" class="md-nav__link">
 408         Runtime Caches
 409       </a>
 410     </li>
 411
 412
 413
 414
 415         </ul>
 416       </nav>
 417     </li>
 418
 419
 420
 421
 422
 423
 424
 425
 426
 427     <li class="md-nav__item">
 428       <a href="../../php/api/comments/" class="md-nav__link">
 429         Comments
 430       </a>
 431     </li>
 432
 433
 434
 435
 436
 437
 438
 439
 440
 441     <li class="md-nav__item">
 442       <a href="../../php/api/cronjobs/" class="md-nav__link">
 443         Cronjobs
 444       </a>
 445     </li>
 446
 447
 448
 449
 450
 451
 452
 453
 454
 455     <li class="md-nav__item">
 456       <a href="../../php/api/events/" class="md-nav__link">
 457         Events
 458       </a>
 459     </li>
 460
 461
 462
 463
 464
 465
 466
 467
 468
 469
 470     <li class="md-nav__item md-nav__item--nested">
 471
 472
 473
 474
 475       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_5_5" >
 476
 477
 478
 479         <label class="md-nav__link" for="__nav_2_5_5" id="__nav_2_5_5_label" tabindex="0">
 480           Form Builder
 481           <span class="md-nav__icon md-icon"></span>
 482         </label>
 483
 484       <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_5_5_label" aria-expanded="false">
 485         <label class="md-nav__title" for="__nav_2_5_5">
 486           <span class="md-nav__icon md-icon"></span>
 487           Form Builder
 488         </label>
 489         <ul class="md-nav__list" data-md-scrollfix>
 490
 491
 492
 493
 494
 495
 496     <li class="md-nav__item">
 497       <a href="../../php/api/form_builder/overview/" class="md-nav__link">
 498         Overview
 499       </a>
 500     </li>
 501
 502
 503
 504
 505
 506
 507
 508
 509
 510     <li class="md-nav__item">
 511       <a href="../../php/api/form_builder/structure/" class="md-nav__link">
 512         Structure
 513       </a>
 514     </li>
 515
 516
 517
 518
 519
 520
 521
 522
 523
 524     <li class="md-nav__item">
 525       <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
 526         Fields
 527       </a>
 528     </li>
 529
 530
 531
 532
 533
 534
 535
 536
 537
 538     <li class="md-nav__item">
 539       <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
 540         Validation and Data
 541       </a>
 542     </li>
 543
 544
 545
 546
 547
 548
 549
 550
 551
 552     <li class="md-nav__item">
 553       <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
 554         Dependencies
 555       </a>
 556     </li>
 557
 558
 559
 560
 561         </ul>
 562       </nav>
 563     </li>
 564
 565
 566
 567
 568
 569
 570
 571
 572
 573     <li class="md-nav__item">
 574       <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
 575         Package Installation Plugins
 576       </a>
 577     </li>
 578
 579
 580
 581
 582
 583
 584
 585
 586
 587     <li class="md-nav__item">
 588       <a href="../../php/api/user_activity_points/" class="md-nav__link">
 589         User Activity Points
 590       </a>
 591     </li>
 592
 593
 594
 595
 596
 597
 598
 599
 600
 601     <li class="md-nav__item">
 602       <a href="../../php/api/user_notifications/" class="md-nav__link">
 603         User Notifications
 604       </a>
 605     </li>
 606
 607
 608
 609
 610
 611
 612
 613
 614
 615     <li class="md-nav__item">
 616       <a href="../../php/api/sitemaps/" class="md-nav__link">
 617         Sitemaps
 618       </a>
 619     </li>
 620
 621
 622
 623
 624         </ul>
 625       </nav>
 626     </li>
 627
 628
 629
 630
 631
 632
 633
 634
 635
 636     <li class="md-nav__item">
 637       <a href="../../php/code-style/" class="md-nav__link">
 638         Code Style
 639       </a>
 640     </li>
 641
 642
 643
 644
 645
 646
 647
 648
 649
 650     <li class="md-nav__item">
 651       <a href="../../php/apps/" class="md-nav__link">
 652         Apps
 653       </a>
 654     </li>
 655
 656
 657
 658
 659
 660
 661
 662
 663
 664     <li class="md-nav__item">
 665       <a href="../../php/gdpr/" class="md-nav__link">
 666         GDPR
 667       </a>
 668     </li>
 669
 670
 671
 672
 673         </ul>
 674       </nav>
 675     </li>
 676
 677
 678
 679
 680
 681
 682
 683
 684
 685
 686
 687     <li class="md-nav__item md-nav__item--nested">
 688
 689
 690
 691
 692       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
 693
 694
 695
 696         <label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
 697           Languages, Templates & CSS
 698           <span class="md-nav__icon md-icon"></span>
 699         </label>
 700
 701       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
 702         <label class="md-nav__title" for="__nav_3">
 703           <span class="md-nav__icon md-icon"></span>
 704           Languages, Templates & CSS
 705         </label>
 706         <ul class="md-nav__list" data-md-scrollfix>
 707
 708
 709
 710
 711
 712
 713     <li class="md-nav__item">
 714       <a href="../../view/languages/" class="md-nav__link">
 715         Languages
 716       </a>
 717     </li>
 718
 719
 720
 721
 722
 723
 724
 725
 726
 727     <li class="md-nav__item">
 728       <a href="../../view/templates/" class="md-nav__link">
 729         Templates
 730       </a>
 731     </li>
 732
 733
 734
 735
 736
 737
 738
 739
 740
 741     <li class="md-nav__item">
 742       <a href="../../view/template-modifiers/" class="md-nav__link">
 743         Template Modifiers
 744       </a>
 745     </li>
 746
 747
 748
 749
 750
 751
 752
 753
 754
 755     <li class="md-nav__item">
 756       <a href="../../view/template-plugins/" class="md-nav__link">
 757         Template Plugins
 758       </a>
 759     </li>
 760
 761
 762
 763
 764
 765
 766
 767
 768
 769     <li class="md-nav__item">
 770       <a href="../../view/css/" class="md-nav__link">
 771         CSS
 772       </a>
 773     </li>
 774
 775
 776
 777
 778         </ul>
 779       </nav>
 780     </li>
 781
 782
 783
 784
 785
 786
 787
 788
 789
 790
 791
 792
 793
 794     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 795
 796
 797
 798
 799       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" checked>
 800
 801
 802
 803         <label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
 804           TypeScript and JavaScript API
 805           <span class="md-nav__icon md-icon"></span>
 806         </label>
 807
 808       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="true">
 809         <label class="md-nav__title" for="__nav_4">
 810           <span class="md-nav__icon md-icon"></span>
 811           TypeScript and JavaScript API
 812         </label>
 813         <ul class="md-nav__list" data-md-scrollfix>
 814
 815
 816
 817
 818
 819
 820     <li class="md-nav__item">
 821       <a href="../general-usage/" class="md-nav__link">
 822         General Usage
 823       </a>
 824     </li>
 825
 826
 827
 828
 829
 830
 831
 832
 833
 834     <li class="md-nav__item">
 835       <a href="../typescript/" class="md-nav__link">
 836         TypeScript
 837       </a>
 838     </li>
 839
 840
 841
 842
 843
 844
 845
 846
 847
 848
 849
 850
 851     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 852
 853
 854
 855
 856       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3" checked>
 857
 858
 859
 860         <label class="md-nav__link" for="__nav_4_3" id="__nav_4_3_label" tabindex="0">
 861           Components
 862           <span class="md-nav__icon md-icon"></span>
 863         </label>
 864
 865       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_3_label" aria-expanded="true">
 866         <label class="md-nav__title" for="__nav_4_3">
 867           <span class="md-nav__icon md-icon"></span>
 868           Components
 869         </label>
 870         <ul class="md-nav__list" data-md-scrollfix>
 871
 872
 873
 874
 875
 876
 877     <li class="md-nav__item">
 878       <a href="../components_confirmation/" class="md-nav__link">
 879         Confirmation
 880       </a>
 881     </li>
 882
 883
 884
 885
 886
 887
 888
 889
 890
 891
 892
 893     <li class="md-nav__item md-nav__item--active">
 894
 895       <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
 896
 897
 898
 899
 900
 901         <label class="md-nav__link md-nav__link--active" for="__toc">
 902           Dialog
 903           <span class="md-nav__icon md-icon"></span>
 904         </label>
 905
 906       <a href="./" class="md-nav__link md-nav__link--active">
 907         Dialog
 908       </a>
 909
 910
 911
 912 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 913
 914
 915
 916
 917
 918
 919     <label class="md-nav__title" for="__toc">
 920       <span class="md-nav__icon md-icon"></span>
 921       Table of contents
 922     </label>
 923     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 924
 925         <li class="md-nav__item">
 926   <a href="#quickstart" class="md-nav__link">
 927     Quickstart
 928   </a>
 929
 930 </li>
 931
 932         <li class="md-nav__item">
 933   <a href="#dialogs-without-controls" class="md-nav__link">
 934     Dialogs Without Controls
 935   </a>
 936
 937     <nav class="md-nav" aria-label="Dialogs Without Controls">
 938       <ul class="md-nav__list">
 939
 940           <li class="md-nav__item">
 941   <a href="#when-to-use" class="md-nav__link">
 942     When to Use
 943   </a>
 944
 945 </li>
 946
 947       </ul>
 948     </nav>
 949
 950 </li>
 951
 952         <li class="md-nav__item">
 953   <a href="#alerts" class="md-nav__link">
 954     Alerts
 955   </a>
 956
 957     <nav class="md-nav" aria-label="Alerts">
 958       <ul class="md-nav__list">
 959
 960           <li class="md-nav__item">
 961   <a href="#when-to-use_1" class="md-nav__link">
 962     When to Use
 963   </a>
 964
 965 </li>
 966
 967       </ul>
 968     </nav>
 969
 970 </li>
 971
 972         <li class="md-nav__item">
 973   <a href="#confirmation" class="md-nav__link">
 974     Confirmation
 975   </a>
 976
 977 </li>
 978
 979         <li class="md-nav__item">
 980   <a href="#prompts" class="md-nav__link">
 981     Prompts
 982   </a>
 983
 984     <nav class="md-nav" aria-label="Prompts">
 985       <ul class="md-nav__list">
 986
 987           <li class="md-nav__item">
 988   <a href="#code-example" class="md-nav__link">
 989     Code Example
 990   </a>
 991
 992 </li>
 993
 994           <li class="md-nav__item">
 995   <a href="#custom-buttons" class="md-nav__link">
 996     Custom Buttons
 997   </a>
 998
 999     <nav class="md-nav" aria-label="Custom Buttons">
1000       <ul class="md-nav__list">
1001
1002           <li class="md-nav__item">
1003   <a href="#customizing-the-primary-button" class="md-nav__link">
1004     Customizing the Primary Button
1005   </a>
1006
1007 </li>
1008
1009       </ul>
1010     </nav>
1011
1012 </li>
1013
1014           <li class="md-nav__item">
1015   <a href="#adding-an-extra-button" class="md-nav__link">
1016     Adding an Extra Button
1017   </a>
1018
1019 </li>
1020
1021       </ul>
1022     </nav>
1023
1024 </li>
1025
1026         <li class="md-nav__item">
1027   <a href="#interacting-with-dialogs" class="md-nav__link">
1028     Interacting with dialogs
1029   </a>
1030
1031     <nav class="md-nav" aria-label="Interacting with dialogs">
1032       <ul class="md-nav__list">
1033
1034           <li class="md-nav__item">
1035   <a href="#opening-and-closing-dialogs" class="md-nav__link">
1036     Opening and Closing Dialogs
1037   </a>
1038
1039 </li>
1040
1041           <li class="md-nav__item">
1042   <a href="#accessing-the-content" class="md-nav__link">
1043     Accessing the Content
1044   </a>
1045
1046 </li>
1047
1048           <li class="md-nav__item">
1049   <a href="#disabling-the-submit-button-of-a-dialog" class="md-nav__link">
1050     Disabling the Submit Button of a Dialog
1051   </a>
1052
1053 </li>
1054
1055           <li class="md-nav__item">
1056   <a href="#managing-an-instance-of-a-dialog" class="md-nav__link">
1057     Managing an Instance of a Dialog
1058   </a>
1059
1060 </li>
1061
1062           <li class="md-nav__item">
1063   <a href="#event-access" class="md-nav__link">
1064     Event Access
1065   </a>
1066
1067     <nav class="md-nav" aria-label="Event Access">
1068       <ul class="md-nav__list">
1069
1070           <li class="md-nav__item">
1071   <a href="#afterclose" class="md-nav__link">
1072     afterClose
1073   </a>
1074
1075 </li>
1076
1077           <li class="md-nav__item">
1078   <a href="#close" class="md-nav__link">
1079     close
1080   </a>
1081
1082 </li>
1083
1084           <li class="md-nav__item">
1085   <a href="#cancel" class="md-nav__link">
1086     cancel
1087   </a>
1088
1089 </li>
1090
1091           <li class="md-nav__item">
1092   <a href="#extra" class="md-nav__link">
1093     extra
1094   </a>
1095
1096 </li>
1097
1098           <li class="md-nav__item">
1099   <a href="#primary" class="md-nav__link">
1100     primary
1101   </a>
1102
1103 </li>
1104
1105           <li class="md-nav__item">
1106   <a href="#validate" class="md-nav__link">
1107     validate
1108   </a>
1109
1110 </li>
1111
1112       </ul>
1113     </nav>
1114
1115 </li>
1116
1117       </ul>
1118     </nav>
1119
1120 </li>
1121
1122     </ul>
1123
1124 </nav>
1125
1126     </li>
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136     <li class="md-nav__item">
1137       <a href="../components_google_maps/" class="md-nav__link">
1138         Google Maps
1139       </a>
1140     </li>
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150     <li class="md-nav__item">
1151       <a href="../components_pagination/" class="md-nav__link">
1152         Pagination
1153       </a>
1154     </li>
1155
1156
1157
1158
1159         </ul>
1160       </nav>
1161     </li>
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172     <li class="md-nav__item md-nav__item--nested">
1173
1174
1175
1176
1177       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_4" >
1178
1179
1180
1181         <label class="md-nav__link" for="__nav_4_4" id="__nav_4_4_label" tabindex="0">
1182           New API
1183           <span class="md-nav__icon md-icon"></span>
1184         </label>
1185
1186       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_4_label" aria-expanded="false">
1187         <label class="md-nav__title" for="__nav_4_4">
1188           <span class="md-nav__icon md-icon"></span>
1189           New API
1190         </label>
1191         <ul class="md-nav__list" data-md-scrollfix>
1192
1193
1194
1195
1196
1197
1198     <li class="md-nav__item">
1199       <a href="../new-api_writing-a-module/" class="md-nav__link">
1200         Writing a module
1201       </a>
1202     </li>
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212     <li class="md-nav__item">
1213       <a href="../new-api_core/" class="md-nav__link">
1214         Core Functions
1215       </a>
1216     </li>
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226     <li class="md-nav__item">
1227       <a href="../new-api_dom/" class="md-nav__link">
1228         DOM
1229       </a>
1230     </li>
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240     <li class="md-nav__item">
1241       <a href="../new-api_events/" class="md-nav__link">
1242         Event Handling
1243       </a>
1244     </li>
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254     <li class="md-nav__item">
1255       <a href="../new-api_ajax/" class="md-nav__link">
1256         Ajax
1257       </a>
1258     </li>
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268     <li class="md-nav__item">
1269       <a href="../new-api_dialogs/" class="md-nav__link">
1270         Dialogs
1271       </a>
1272     </li>
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282     <li class="md-nav__item">
1283       <a href="../new-api_browser/" class="md-nav__link">
1284         Browser and Screen Sizes
1285       </a>
1286     </li>
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296     <li class="md-nav__item">
1297       <a href="../new-api_ui/" class="md-nav__link">
1298         User Interface
1299       </a>
1300     </li>
1301
1302
1303
1304
1305         </ul>
1306       </nav>
1307     </li>
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317     <li class="md-nav__item">
1318       <a href="../legacy-api/" class="md-nav__link">
1319         Legacy API
1320       </a>
1321     </li>
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331     <li class="md-nav__item">
1332       <a href="../code-snippets/" class="md-nav__link">
1333         Code Snippets
1334       </a>
1335     </li>
1336
1337
1338
1339
1340         </ul>
1341       </nav>
1342     </li>
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354     <li class="md-nav__item md-nav__item--nested">
1355
1356
1357
1358
1359       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
1360
1361
1362
1363         <label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
1364           Package Components
1365           <span class="md-nav__icon md-icon"></span>
1366         </label>
1367
1368       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
1369         <label class="md-nav__title" for="__nav_5">
1370           <span class="md-nav__icon md-icon"></span>
1371           Package Components
1372         </label>
1373         <ul class="md-nav__list" data-md-scrollfix>
1374
1375
1376
1377
1378
1379
1380     <li class="md-nav__item">
1381       <a href="../../package/package-xml/" class="md-nav__link">
1382         package.xml
1383       </a>
1384     </li>
1385
1386
1387
1388
1389
1390
1391
1392
1393
1394
1395     <li class="md-nav__item md-nav__item--nested">
1396
1397
1398
1399
1400       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2" >
1401
1402
1403
1404         <label class="md-nav__link" for="__nav_5_2" id="__nav_5_2_label" tabindex="0">
1405           PIPs
1406           <span class="md-nav__icon md-icon"></span>
1407         </label>
1408
1409       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_2_label" aria-expanded="false">
1410         <label class="md-nav__title" for="__nav_5_2">
1411           <span class="md-nav__icon md-icon"></span>
1412           PIPs
1413         </label>
1414         <ul class="md-nav__list" data-md-scrollfix>
1415
1416
1417
1418
1419
1420
1421     <li class="md-nav__item">
1422       <a href="../../package/pip/" class="md-nav__link">
1423         Overview
1424       </a>
1425     </li>
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435     <li class="md-nav__item">
1436       <a href="../../package/pip/acl-option/" class="md-nav__link">
1437         aclOption
1438       </a>
1439     </li>
1440
1441
1442
1443
1444
1445
1446
1447
1448
1449     <li class="md-nav__item">
1450       <a href="../../package/pip/acp-menu/" class="md-nav__link">
1451         acpMenu
1452       </a>
1453     </li>
1454
1455
1456
1457
1458
1459
1460
1461
1462
1463     <li class="md-nav__item">
1464       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
1465         acpSearchProvider
1466       </a>
1467     </li>
1468
1469
1470
1471
1472
1473
1474
1475
1476
1477     <li class="md-nav__item">
1478       <a href="../../package/pip/acp-template/" class="md-nav__link">
1479         acpTemplate
1480       </a>
1481     </li>
1482
1483
1484
1485
1486
1487
1488
1489
1490
1491     <li class="md-nav__item">
1492       <a href="../../package/pip/acp-template-delete/" class="md-nav__link">
1493         acpTemplateDelete
1494       </a>
1495     </li>
1496
1497
1498
1499
1500
1501
1502
1503
1504
1505     <li class="md-nav__item">
1506       <a href="../../package/pip/bbcode/" class="md-nav__link">
1507         bbcode
1508       </a>
1509     </li>
1510
1511
1512
1513
1514
1515
1516
1517
1518
1519     <li class="md-nav__item">
1520       <a href="../../package/pip/box/" class="md-nav__link">
1521         box
1522       </a>
1523     </li>
1524
1525
1526
1527
1528
1529
1530
1531
1532
1533     <li class="md-nav__item">
1534       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1535         clipboardAction
1536       </a>
1537     </li>
1538
1539
1540
1541
1542
1543
1544
1545
1546
1547     <li class="md-nav__item">
1548       <a href="../../package/pip/core-object/" class="md-nav__link">
1549         coreObject
1550       </a>
1551     </li>
1552
1553
1554
1555
1556
1557
1558
1559
1560
1561     <li class="md-nav__item">
1562       <a href="../../package/pip/cronjob/" class="md-nav__link">
1563         cronjob
1564       </a>
1565     </li>
1566
1567
1568
1569
1570
1571
1572
1573
1574
1575     <li class="md-nav__item">
1576       <a href="../../package/pip/database/" class="md-nav__link">
1577         database
1578       </a>
1579     </li>
1580
1581
1582
1583
1584
1585
1586
1587
1588
1589     <li class="md-nav__item">
1590       <a href="../../package/pip/event-listener/" class="md-nav__link">
1591         eventListener
1592       </a>
1593     </li>
1594
1595
1596
1597
1598
1599
1600
1601
1602
1603     <li class="md-nav__item">
1604       <a href="../../package/pip/file/" class="md-nav__link">
1605         file
1606       </a>
1607     </li>
1608
1609
1610
1611
1612
1613
1614
1615
1616
1617     <li class="md-nav__item">
1618       <a href="../../package/pip/file-delete/" class="md-nav__link">
1619         fileDelete
1620       </a>
1621     </li>
1622
1623
1624
1625
1626
1627
1628
1629
1630
1631     <li class="md-nav__item">
1632       <a href="../../package/pip/language/" class="md-nav__link">
1633         language
1634       </a>
1635     </li>
1636
1637
1638
1639
1640
1641
1642
1643
1644
1645     <li class="md-nav__item">
1646       <a href="../../package/pip/media-provider/" class="md-nav__link">
1647         mediaProvider
1648       </a>
1649     </li>
1650
1651
1652
1653
1654
1655
1656
1657
1658
1659     <li class="md-nav__item">
1660       <a href="../../package/pip/menu/" class="md-nav__link">
1661         menu
1662       </a>
1663     </li>
1664
1665
1666
1667
1668
1669
1670
1671
1672
1673     <li class="md-nav__item">
1674       <a href="../../package/pip/menu-item/" class="md-nav__link">
1675         menuItem
1676       </a>
1677     </li>
1678
1679
1680
1681
1682
1683
1684
1685
1686
1687     <li class="md-nav__item">
1688       <a href="../../package/pip/object-type/" class="md-nav__link">
1689         objectType
1690       </a>
1691     </li>
1692
1693
1694
1695
1696
1697
1698
1699
1700
1701     <li class="md-nav__item">
1702       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1703         objectTypeDefinition
1704       </a>
1705     </li>
1706
1707
1708
1709
1710
1711
1712
1713
1714
1715     <li class="md-nav__item">
1716       <a href="../../package/pip/option/" class="md-nav__link">
1717         option
1718       </a>
1719     </li>
1720
1721
1722
1723
1724
1725
1726
1727
1728
1729     <li class="md-nav__item">
1730       <a href="../../package/pip/page/" class="md-nav__link">
1731         page
1732       </a>
1733     </li>
1734
1735
1736
1737
1738
1739
1740
1741
1742
1743     <li class="md-nav__item">
1744       <a href="../../package/pip/pip/" class="md-nav__link">
1745         pip
1746       </a>
1747     </li>
1748
1749
1750
1751
1752
1753
1754
1755
1756
1757     <li class="md-nav__item">
1758       <a href="../../package/pip/script/" class="md-nav__link">
1759         script
1760       </a>
1761     </li>
1762
1763
1764
1765
1766
1767
1768
1769
1770
1771     <li class="md-nav__item">
1772       <a href="../../package/pip/smiley/" class="md-nav__link">
1773         smiley
1774       </a>
1775     </li>
1776
1777
1778
1779
1780
1781
1782
1783
1784
1785     <li class="md-nav__item">
1786       <a href="../../package/pip/sql/" class="md-nav__link">
1787         sql
1788       </a>
1789     </li>
1790
1791
1792
1793
1794
1795
1796
1797
1798
1799     <li class="md-nav__item">
1800       <a href="../../package/pip/style/" class="md-nav__link">
1801         style
1802       </a>
1803     </li>
1804
1805
1806
1807
1808
1809
1810
1811
1812
1813     <li class="md-nav__item">
1814       <a href="../../package/pip/template/" class="md-nav__link">
1815         template
1816       </a>
1817     </li>
1818
1819
1820
1821
1822
1823
1824
1825
1826
1827     <li class="md-nav__item">
1828       <a href="../../package/pip/template-delete/" class="md-nav__link">
1829         templateDelete
1830       </a>
1831     </li>
1832
1833
1834
1835
1836
1837
1838
1839
1840
1841     <li class="md-nav__item">
1842       <a href="../../package/pip/template-listener/" class="md-nav__link">
1843         templateListener
1844       </a>
1845     </li>
1846
1847
1848
1849
1850
1851
1852
1853
1854
1855     <li class="md-nav__item">
1856       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1857         userGroupOption
1858       </a>
1859     </li>
1860
1861
1862
1863
1864
1865
1866
1867
1868
1869     <li class="md-nav__item">
1870       <a href="../../package/pip/user-menu/" class="md-nav__link">
1871         userMenu
1872       </a>
1873     </li>
1874
1875
1876
1877
1878
1879
1880
1881
1882
1883     <li class="md-nav__item">
1884       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1885         userNotificationEvent
1886       </a>
1887     </li>
1888
1889
1890
1891
1892
1893
1894
1895
1896
1897     <li class="md-nav__item">
1898       <a href="../../package/pip/user-option/" class="md-nav__link">
1899         userOption
1900       </a>
1901     </li>
1902
1903
1904
1905
1906
1907
1908
1909
1910
1911     <li class="md-nav__item">
1912       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1913         userProfileMenu
1914       </a>
1915     </li>
1916
1917
1918
1919
1920         </ul>
1921       </nav>
1922     </li>
1923
1924
1925
1926
1927
1928
1929
1930
1931
1932     <li class="md-nav__item">
1933       <a href="../../package/database-php-api/" class="md-nav__link">
1934         Database PHP API
1935       </a>
1936     </li>
1937
1938
1939
1940
1941         </ul>
1942       </nav>
1943     </li>
1944
1945
1946
1947
1948
1949
1950
1951
1952
1953
1954
1955     <li class="md-nav__item md-nav__item--nested">
1956
1957
1958
1959
1960       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
1961
1962
1963
1964         <label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
1965           Migration
1966           <span class="md-nav__icon md-icon"></span>
1967         </label>
1968
1969       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
1970         <label class="md-nav__title" for="__nav_6">
1971           <span class="md-nav__icon md-icon"></span>
1972           Migration
1973         </label>
1974         <ul class="md-nav__list" data-md-scrollfix>
1975
1976
1977
1978
1979
1980
1981
1982     <li class="md-nav__item md-nav__item--nested">
1983
1984
1985
1986
1987       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_1" >
1988
1989
1990
1991         <label class="md-nav__link" for="__nav_6_1" id="__nav_6_1_label" tabindex="0">
1992           From WoltLab Suite 5.5
1993           <span class="md-nav__icon md-icon"></span>
1994         </label>
1995
1996       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_1_label" aria-expanded="false">
1997         <label class="md-nav__title" for="__nav_6_1">
1998           <span class="md-nav__icon md-icon"></span>
1999           From WoltLab Suite 5.5
2000         </label>
2001         <ul class="md-nav__list" data-md-scrollfix>
2002
2003
2004
2005
2006
2007
2008     <li class="md-nav__item">
2009       <a href="../../migration/wsc55/php/" class="md-nav__link">
2010         PHP API
2011       </a>
2012     </li>
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022     <li class="md-nav__item">
2023       <a href="../../migration/wsc55/javascript/" class="md-nav__link">
2024         TypeScript and JavaScript
2025       </a>
2026     </li>
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036     <li class="md-nav__item">
2037       <a href="../../migration/wsc55/templates/" class="md-nav__link">
2038         Templates
2039       </a>
2040     </li>
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050     <li class="md-nav__item">
2051       <a href="../../migration/wsc55/icons/" class="md-nav__link">
2052         Icons
2053       </a>
2054     </li>
2055
2056
2057
2058
2059
2060
2061
2062
2063
2064     <li class="md-nav__item">
2065       <a href="../../migration/wsc55/dialogs/" class="md-nav__link">
2066         Dialogs
2067       </a>
2068     </li>
2069
2070
2071
2072
2073
2074
2075
2076
2077
2078     <li class="md-nav__item">
2079       <a href="../../migration/wsc55/libraries/" class="md-nav__link">
2080         Third Party Libraries
2081       </a>
2082     </li>
2083
2084
2085
2086
2087
2088
2089
2090
2091
2092     <li class="md-nav__item">
2093       <a href="../../migration/wsc55/deprecations_removals/" class="md-nav__link">
2094         Deprecations and Removals
2095       </a>
2096     </li>
2097
2098
2099
2100
2101         </ul>
2102       </nav>
2103     </li>
2104
2105
2106
2107
2108
2109
2110
2111
2112
2113
2114     <li class="md-nav__item md-nav__item--nested">
2115
2116
2117
2118
2119       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_2" >
2120
2121
2122
2123         <label class="md-nav__link" for="__nav_6_2" id="__nav_6_2_label" tabindex="0">
2124           From WoltLab Suite 5.4
2125           <span class="md-nav__icon md-icon"></span>
2126         </label>
2127
2128       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_2_label" aria-expanded="false">
2129         <label class="md-nav__title" for="__nav_6_2">
2130           <span class="md-nav__icon md-icon"></span>
2131           From WoltLab Suite 5.4
2132         </label>
2133         <ul class="md-nav__list" data-md-scrollfix>
2134
2135
2136
2137
2138
2139
2140     <li class="md-nav__item">
2141       <a href="../../migration/wsc54/php/" class="md-nav__link">
2142         PHP API
2143       </a>
2144     </li>
2145
2146
2147
2148
2149
2150
2151
2152
2153
2154     <li class="md-nav__item">
2155       <a href="../../migration/wsc54/javascript/" class="md-nav__link">
2156         TypeScript and JavaScript
2157       </a>
2158     </li>
2159
2160
2161
2162
2163
2164
2165
2166
2167
2168     <li class="md-nav__item">
2169       <a href="../../migration/wsc54/templates/" class="md-nav__link">
2170         Templates
2171       </a>
2172     </li>
2173
2174
2175
2176
2177
2178
2179
2180
2181
2182     <li class="md-nav__item">
2183       <a href="../../migration/wsc54/libraries/" class="md-nav__link">
2184         Third Party Libraries
2185       </a>
2186     </li>
2187
2188
2189
2190
2191
2192
2193
2194
2195
2196     <li class="md-nav__item">
2197       <a href="../../migration/wsc54/deprecations_removals/" class="md-nav__link">
2198         Deprecations and Removals
2199       </a>
2200     </li>
2201
2202
2203
2204
2205         </ul>
2206       </nav>
2207     </li>
2208
2209
2210
2211
2212
2213
2214
2215
2216
2217
2218     <li class="md-nav__item md-nav__item--nested">
2219
2220
2221
2222
2223       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_3" >
2224
2225
2226
2227         <label class="md-nav__link" for="__nav_6_3" id="__nav_6_3_label" tabindex="0">
2228           From WoltLab Suite 5.3
2229           <span class="md-nav__icon md-icon"></span>
2230         </label>
2231
2232       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_3_label" aria-expanded="false">
2233         <label class="md-nav__title" for="__nav_6_3">
2234           <span class="md-nav__icon md-icon"></span>
2235           From WoltLab Suite 5.3
2236         </label>
2237         <ul class="md-nav__list" data-md-scrollfix>
2238
2239
2240
2241
2242
2243
2244     <li class="md-nav__item">
2245       <a href="../../migration/wsc53/php/" class="md-nav__link">
2246         PHP API
2247       </a>
2248     </li>
2249
2250
2251
2252
2253
2254
2255
2256
2257
2258     <li class="md-nav__item">
2259       <a href="../../migration/wsc53/session/" class="md-nav__link">
2260         Session Handling and Authentication
2261       </a>
2262     </li>
2263
2264
2265
2266
2267
2268
2269
2270
2271
2272     <li class="md-nav__item">
2273       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
2274         TypeScript and JavaScript
2275       </a>
2276     </li>
2277
2278
2279
2280
2281
2282
2283
2284
2285
2286     <li class="md-nav__item">
2287       <a href="../../migration/wsc53/templates/" class="md-nav__link">
2288         Templates
2289       </a>
2290     </li>
2291
2292
2293
2294
2295
2296
2297
2298
2299
2300     <li class="md-nav__item">
2301       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
2302         Third Party Libraries
2303       </a>
2304     </li>
2305
2306
2307
2308
2309         </ul>
2310       </nav>
2311     </li>
2312
2313
2314
2315
2316
2317
2318
2319
2320
2321
2322     <li class="md-nav__item md-nav__item--nested">
2323
2324
2325
2326
2327       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_4" >
2328
2329
2330
2331         <label class="md-nav__link" for="__nav_6_4" id="__nav_6_4_label" tabindex="0">
2332           From WoltLab Suite 5.2
2333           <span class="md-nav__icon md-icon"></span>
2334         </label>
2335
2336       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_4_label" aria-expanded="false">
2337         <label class="md-nav__title" for="__nav_6_4">
2338           <span class="md-nav__icon md-icon"></span>
2339           From WoltLab Suite 5.2
2340         </label>
2341         <ul class="md-nav__list" data-md-scrollfix>
2342
2343
2344
2345
2346
2347
2348     <li class="md-nav__item">
2349       <a href="../../migration/wsc52/php/" class="md-nav__link">
2350         PHP API
2351       </a>
2352     </li>
2353
2354
2355
2356
2357
2358
2359
2360
2361
2362     <li class="md-nav__item">
2363       <a href="../../migration/wsc52/templates/" class="md-nav__link">
2364         Templates and Languages
2365       </a>
2366     </li>
2367
2368
2369
2370
2371
2372
2373
2374
2375
2376     <li class="md-nav__item">
2377       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
2378         Third Party Libraries
2379       </a>
2380     </li>
2381
2382
2383
2384
2385         </ul>
2386       </nav>
2387     </li>
2388
2389
2390
2391
2392
2393
2394
2395
2396
2397
2398     <li class="md-nav__item md-nav__item--nested">
2399
2400
2401
2402
2403       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_5" >
2404
2405
2406
2407         <label class="md-nav__link" for="__nav_6_5" id="__nav_6_5_label" tabindex="0">
2408           From WoltLab Suite 3.1
2409           <span class="md-nav__icon md-icon"></span>
2410         </label>
2411
2412       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_5_label" aria-expanded="false">
2413         <label class="md-nav__title" for="__nav_6_5">
2414           <span class="md-nav__icon md-icon"></span>
2415           From WoltLab Suite 3.1
2416         </label>
2417         <ul class="md-nav__list" data-md-scrollfix>
2418
2419
2420
2421
2422
2423
2424     <li class="md-nav__item">
2425       <a href="../../migration/wsc31/php/" class="md-nav__link">
2426         PHP API
2427       </a>
2428     </li>
2429
2430
2431
2432
2433         </ul>
2434       </nav>
2435     </li>
2436
2437
2438
2439
2440
2441
2442
2443
2444
2445
2446     <li class="md-nav__item md-nav__item--nested">
2447
2448
2449
2450
2451       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_6" >
2452
2453
2454
2455         <label class="md-nav__link" for="__nav_6_6" id="__nav_6_6_label" tabindex="0">
2456           From WoltLab Suite 3.0
2457           <span class="md-nav__icon md-icon"></span>
2458         </label>
2459
2460       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_6_label" aria-expanded="false">
2461         <label class="md-nav__title" for="__nav_6_6">
2462           <span class="md-nav__icon md-icon"></span>
2463           From WoltLab Suite 3.0
2464         </label>
2465         <ul class="md-nav__list" data-md-scrollfix>
2466
2467
2468
2469
2470
2471
2472     <li class="md-nav__item">
2473       <a href="../../migration/wsc30/php/" class="md-nav__link">
2474         PHP API
2475       </a>
2476     </li>
2477
2478
2479
2480
2481
2482
2483
2484
2485
2486     <li class="md-nav__item">
2487       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
2488         JavaScript API
2489       </a>
2490     </li>
2491
2492
2493
2494
2495
2496
2497
2498
2499
2500     <li class="md-nav__item">
2501       <a href="../../migration/wsc30/templates/" class="md-nav__link">
2502         Templates
2503       </a>
2504     </li>
2505
2506
2507
2508
2509
2510
2511
2512
2513
2514     <li class="md-nav__item">
2515       <a href="../../migration/wsc30/css/" class="md-nav__link">
2516         CSS
2517       </a>
2518     </li>
2519
2520
2521
2522
2523
2524
2525
2526
2527
2528     <li class="md-nav__item">
2529       <a href="../../migration/wsc30/package/" class="md-nav__link">
2530         Package Components
2531       </a>
2532     </li>
2533
2534
2535
2536
2537         </ul>
2538       </nav>
2539     </li>
2540
2541
2542
2543
2544
2545
2546
2547
2548
2549
2550     <li class="md-nav__item md-nav__item--nested">
2551
2552
2553
2554
2555       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_7" >
2556
2557
2558
2559         <label class="md-nav__link" for="__nav_6_7" id="__nav_6_7_label" tabindex="0">
2560           From WCF 2.1
2561           <span class="md-nav__icon md-icon"></span>
2562         </label>
2563
2564       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_7_label" aria-expanded="false">
2565         <label class="md-nav__title" for="__nav_6_7">
2566           <span class="md-nav__icon md-icon"></span>
2567           From WCF 2.1
2568         </label>
2569         <ul class="md-nav__list" data-md-scrollfix>
2570
2571
2572
2573
2574
2575
2576     <li class="md-nav__item">
2577       <a href="../../migration/wcf21/php/" class="md-nav__link">
2578         PHP API
2579       </a>
2580     </li>
2581
2582
2583
2584
2585
2586
2587
2588
2589
2590     <li class="md-nav__item">
2591       <a href="../../migration/wcf21/templates/" class="md-nav__link">
2592         Templates
2593       </a>
2594     </li>
2595
2596
2597
2598
2599
2600
2601
2602
2603
2604     <li class="md-nav__item">
2605       <a href="../../migration/wcf21/css/" class="md-nav__link">
2606         CSS
2607       </a>
2608     </li>
2609
2610
2611
2612
2613
2614
2615
2616
2617
2618     <li class="md-nav__item">
2619       <a href="../../migration/wcf21/package/" class="md-nav__link">
2620         Package Components
2621       </a>
2622     </li>
2623
2624
2625
2626
2627         </ul>
2628       </nav>
2629     </li>
2630
2631
2632
2633
2634         </ul>
2635       </nav>
2636     </li>
2637
2638
2639
2640
2641
2642
2643
2644
2645
2646
2647
2648     <li class="md-nav__item md-nav__item--nested">
2649
2650
2651
2652
2653       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" >
2654
2655
2656
2657         <label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
2658           Tutorials
2659           <span class="md-nav__icon md-icon"></span>
2660         </label>
2661
2662       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
2663         <label class="md-nav__title" for="__nav_7">
2664           <span class="md-nav__icon md-icon"></span>
2665           Tutorials
2666         </label>
2667         <ul class="md-nav__list" data-md-scrollfix>
2668
2669
2670
2671
2672
2673
2674
2675     <li class="md-nav__item md-nav__item--nested">
2676
2677
2678
2679
2680       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7_1" >
2681
2682
2683
2684         <label class="md-nav__link" for="__nav_7_1" id="__nav_7_1_label" tabindex="0">
2685           Tutorial Series
2686           <span class="md-nav__icon md-icon"></span>
2687         </label>
2688
2689       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_7_1_label" aria-expanded="false">
2690         <label class="md-nav__title" for="__nav_7_1">
2691           <span class="md-nav__icon md-icon"></span>
2692           Tutorial Series
2693         </label>
2694         <ul class="md-nav__list" data-md-scrollfix>
2695
2696
2697
2698
2699
2700
2701     <li class="md-nav__item">
2702       <a href="../../tutorial/series/overview/" class="md-nav__link">
2703         Overview
2704       </a>
2705     </li>
2706
2707
2708
2709
2710
2711
2712
2713
2714
2715     <li class="md-nav__item">
2716       <a href="../../tutorial/series/part_1/" class="md-nav__link">
2717         Part 1
2718       </a>
2719     </li>
2720
2721
2722
2723
2724
2725
2726
2727
2728
2729     <li class="md-nav__item">
2730       <a href="../../tutorial/series/part_2/" class="md-nav__link">
2731         Part 2
2732       </a>
2733     </li>
2734
2735
2736
2737
2738
2739
2740
2741
2742
2743     <li class="md-nav__item">
2744       <a href="../../tutorial/series/part_3/" class="md-nav__link">
2745         Part 3
2746       </a>
2747     </li>
2748
2749
2750
2751
2752
2753
2754
2755
2756
2757     <li class="md-nav__item">
2758       <a href="../../tutorial/series/part_4/" class="md-nav__link">
2759         Part 4
2760       </a>
2761     </li>
2762
2763
2764
2765
2766
2767
2768
2769
2770
2771     <li class="md-nav__item">
2772       <a href="../../tutorial/series/part_5/" class="md-nav__link">
2773         Part 5
2774       </a>
2775     </li>
2776
2777
2778
2779
2780
2781
2782
2783
2784
2785     <li class="md-nav__item">
2786       <a href="../../tutorial/series/part_6/" class="md-nav__link">
2787         Part 6
2788       </a>
2789     </li>
2790
2791
2792
2793
2794         </ul>
2795       </nav>
2796     </li>
2797
2798
2799
2800
2801         </ul>
2802       </nav>
2803     </li>
2804
2805
2806
2807   </ul>
2808 </nav>
2809                   </div>
2810                 </div>
2811               </div>
2812
2813
2814
2815               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
2816                 <div class="md-sidebar__scrollwrap">
2817                   <div class="md-sidebar__inner">
2818
2819
2820 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
2821
2822
2823
2824
2825
2826
2827     <label class="md-nav__title" for="__toc">
2828       <span class="md-nav__icon md-icon"></span>
2829       Table of contents
2830     </label>
2831     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
2832
2833         <li class="md-nav__item">
2834   <a href="#quickstart" class="md-nav__link">
2835     Quickstart
2836   </a>
2837
2838 </li>
2839
2840         <li class="md-nav__item">
2841   <a href="#dialogs-without-controls" class="md-nav__link">
2842     Dialogs Without Controls
2843   </a>
2844
2845     <nav class="md-nav" aria-label="Dialogs Without Controls">
2846       <ul class="md-nav__list">
2847
2848           <li class="md-nav__item">
2849   <a href="#when-to-use" class="md-nav__link">
2850     When to Use
2851   </a>
2852
2853 </li>
2854
2855       </ul>
2856     </nav>
2857
2858 </li>
2859
2860         <li class="md-nav__item">
2861   <a href="#alerts" class="md-nav__link">
2862     Alerts
2863   </a>
2864
2865     <nav class="md-nav" aria-label="Alerts">
2866       <ul class="md-nav__list">
2867
2868           <li class="md-nav__item">
2869   <a href="#when-to-use_1" class="md-nav__link">
2870     When to Use
2871   </a>
2872
2873 </li>
2874
2875       </ul>
2876     </nav>
2877
2878 </li>
2879
2880         <li class="md-nav__item">
2881   <a href="#confirmation" class="md-nav__link">
2882     Confirmation
2883   </a>
2884
2885 </li>
2886
2887         <li class="md-nav__item">
2888   <a href="#prompts" class="md-nav__link">
2889     Prompts
2890   </a>
2891
2892     <nav class="md-nav" aria-label="Prompts">
2893       <ul class="md-nav__list">
2894
2895           <li class="md-nav__item">
2896   <a href="#code-example" class="md-nav__link">
2897     Code Example
2898   </a>
2899
2900 </li>
2901
2902           <li class="md-nav__item">
2903   <a href="#custom-buttons" class="md-nav__link">
2904     Custom Buttons
2905   </a>
2906
2907     <nav class="md-nav" aria-label="Custom Buttons">
2908       <ul class="md-nav__list">
2909
2910           <li class="md-nav__item">
2911   <a href="#customizing-the-primary-button" class="md-nav__link">
2912     Customizing the Primary Button
2913   </a>
2914
2915 </li>
2916
2917       </ul>
2918     </nav>
2919
2920 </li>
2921
2922           <li class="md-nav__item">
2923   <a href="#adding-an-extra-button" class="md-nav__link">
2924     Adding an Extra Button
2925   </a>
2926
2927 </li>
2928
2929       </ul>
2930     </nav>
2931
2932 </li>
2933
2934         <li class="md-nav__item">
2935   <a href="#interacting-with-dialogs" class="md-nav__link">
2936     Interacting with dialogs
2937   </a>
2938
2939     <nav class="md-nav" aria-label="Interacting with dialogs">
2940       <ul class="md-nav__list">
2941
2942           <li class="md-nav__item">
2943   <a href="#opening-and-closing-dialogs" class="md-nav__link">
2944     Opening and Closing Dialogs
2945   </a>
2946
2947 </li>
2948
2949           <li class="md-nav__item">
2950   <a href="#accessing-the-content" class="md-nav__link">
2951     Accessing the Content
2952   </a>
2953
2954 </li>
2955
2956           <li class="md-nav__item">
2957   <a href="#disabling-the-submit-button-of-a-dialog" class="md-nav__link">
2958     Disabling the Submit Button of a Dialog
2959   </a>
2960
2961 </li>
2962
2963           <li class="md-nav__item">
2964   <a href="#managing-an-instance-of-a-dialog" class="md-nav__link">
2965     Managing an Instance of a Dialog
2966   </a>
2967
2968 </li>
2969
2970           <li class="md-nav__item">
2971   <a href="#event-access" class="md-nav__link">
2972     Event Access
2973   </a>
2974
2975     <nav class="md-nav" aria-label="Event Access">
2976       <ul class="md-nav__list">
2977
2978           <li class="md-nav__item">
2979   <a href="#afterclose" class="md-nav__link">
2980     afterClose
2981   </a>
2982
2983 </li>
2984
2985           <li class="md-nav__item">
2986   <a href="#close" class="md-nav__link">
2987     close
2988   </a>
2989
2990 </li>
2991
2992           <li class="md-nav__item">
2993   <a href="#cancel" class="md-nav__link">
2994     cancel
2995   </a>
2996
2997 </li>
2998
2999           <li class="md-nav__item">
3000   <a href="#extra" class="md-nav__link">
3001     extra
3002   </a>
3003
3004 </li>
3005
3006           <li class="md-nav__item">
3007   <a href="#primary" class="md-nav__link">
3008     primary
3009   </a>
3010
3011 </li>
3012
3013           <li class="md-nav__item">
3014   <a href="#validate" class="md-nav__link">
3015     validate
3016   </a>
3017
3018 </li>
3019
3020       </ul>
3021     </nav>
3022
3023 </li>
3024
3025       </ul>
3026     </nav>
3027
3028 </li>
3029
3030     </ul>
3031
3032 </nav>
3033                   </div>
3034                 </div>
3035               </div>
3036
3037
3038
3039             <div class="md-content" data-md-component="content">
3040               <article class="md-content__inner md-typeset">
3041
3042
3043
3044
3045
3046
3047
3048 <h1 id="dialogs-javascript-api">Dialogs - JavaScript API<a class="headerlink" href="#dialogs-javascript-api" title="Permanent link">#</a></h1>
3049 <p>Modal dialogs are a powerful tool to draw the viewer’s attention to an important message, question or form.
3050 Dialogs naturally interrupt the workflow and prevent the navigation to other sections by making other elements on the page inert.</p>
3051 <p>WoltLab Suite 6.0 ships with four different types of dialogs.</p>
3052 <h2 id="quickstart">Quickstart<a class="headerlink" href="#quickstart" title="Permanent link">#</a></h2>
3053 <p>There are four different types of dialogs that each fulfill their own specialized role and that provide built-in features to make the development much easier.
3054 Please see the following list to make a quick decision of what kind of dialog you need.</p>
3055 <ul>
3056 <li>Is this some kind of error message? Use an alert dialog.</li>
3057 <li>Are you asking the user to confirm an action? Use a <a href="../components_confirmation/">confirmation dialog</a>.</li>
3058 <li>Does the dialog contain form inputs that the user must fill in? Use a prompt dialog.</li>
3059 <li>Do you want to present information to the user without requiring any action? Use a dialog without controls.</li>
3060 </ul>
3061 <h2 id="dialogs-without-controls">Dialogs Without Controls<a class="headerlink" href="#dialogs-without-controls" title="Permanent link">#</a></h2>
3062 <p>Dialogs may contain just an explanation or extra information that should be presented to the viewer without requiring any further interaction.
3063 The dialog can be closed via the “X” button or by clicking the modal backdrop.</p>
3064 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3065 <span class="normal">2</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">dialog</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dialogFactory</span><span class="p">().</span><span class="nx">fromHtml</span><span class="p">(</span><span class="s2">&quot;&lt;p&gt;Hello World&lt;/p&gt;&quot;</span><span class="p">).</span><span class="nx">withoutControls</span><span class="p">();</span>
3066 <span class="nx">dialog</span><span class="p">.</span><span class="nx">show</span><span class="p">(</span><span class="s2">&quot;Greetings from my dialog&quot;</span><span class="p">);</span>
3067 </code></pre></div></td></tr></table></div>
3068 <h3 id="when-to-use">When to Use<a class="headerlink" href="#when-to-use" title="Permanent link">#</a></h3>
3069 <p>The short answer is: Don’t.</p>
3070 <p>Dialogs without controls are an anti-pattern because they only contain content that does not require the modal appearance of a dialog.
3071 More often than not dialogs are used for this kind of content because they are easy to use without thinking about better ways to present the content.</p>
3072 <p>If possible these dialogs should be avoided and the content is presented in a more suitable way, for example, as a flyout or by showing content on an existing or new page.</p>
3073 <h2 id="alerts">Alerts<a class="headerlink" href="#alerts" title="Permanent link">#</a></h2>
3074 <p>Alerts are designed to inform the user of something important that requires no further action by the user.
3075 Typical examples for alerts are error messages or warnings.</p>
3076 <p>An alert will only provide a single button to acknowledge the dialog and must not contain interactive content.
3077 The dialog itself will be limited to a width of 500px, the title can wrap into multiple lines and there will be no “X” button to close the dialog.</p>
3078 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3079 <span class="normal">2</span>
3080 <span class="normal">3</span>
3081 <span class="normal">4</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">dialog</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dialogFactory</span><span class="p">()</span>
3082 <span class="w">  </span><span class="p">.</span><span class="nx">fromHtml</span><span class="p">(</span><span class="s2">&quot;&lt;p&gt;ERROR: Something went wrong!&lt;/p&gt;&quot;</span><span class="p">)</span>
3083 <span class="w">  </span><span class="p">.</span><span class="nx">asAlert</span><span class="p">();</span>
3084 <span class="nx">dialog</span><span class="p">.</span><span class="nx">show</span><span class="p">(</span><span class="s2">&quot;Server Error&quot;</span><span class="p">);</span>
3085 </code></pre></div></td></tr></table></div>
3086 <p>You can customize the label of the primary button to better explain what will happen next.
3087 This can be useful for alerts that will have a side-effect when closing the dialog, such as redirect to a different page.</p>
3088 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
3089 <span class="normal"> 2</span>
3090 <span class="normal"> 3</span>
3091 <span class="normal"> 4</span>
3092 <span class="normal"> 5</span>
3093 <span class="normal"> 6</span>
3094 <span class="normal"> 7</span>
3095 <span class="normal"> 8</span>
3096 <span class="normal"> 9</span>
3097 <span class="normal">10</span>
3098 <span class="normal">11</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">dialog</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dialogFactory</span><span class="p">()</span>
3099 <span class="w">  </span><span class="p">.</span><span class="nx">fromHtml</span><span class="p">(</span><span class="s2">&quot;&lt;p&gt;Something went wrong, we cannot find your shopping cart.&lt;/p&gt;&quot;</span><span class="p">)</span>
3100 <span class="w">  </span><span class="p">.</span><span class="nx">asAlert</span><span class="p">({</span>
3101 <span class="w">    </span><span class="nx">primary</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Back to the Store Page&quot;</span><span class="p">,</span>
3102 <span class="w">  </span><span class="p">});</span>
3103
3104 <span class="nx">dialog</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&quot;primary&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
3105 <span class="w">  </span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;https://example.com/shop/&quot;</span><span class="p">;</span>
3106 <span class="p">});</span>
3107
3108 <span class="nx">dialog</span><span class="p">.</span><span class="nx">show</span><span class="p">(</span><span class="s2">&quot;The shopping cart is missing&quot;</span><span class="p">);</span>
3109 </code></pre></div></td></tr></table></div>
3110 <p>The <code>primary</code> event is triggered both by clicking on the primary button and by clicks on the modal backdrop.</p>
3111 <h3 id="when-to-use_1">When to Use<a class="headerlink" href="#when-to-use_1" title="Permanent link">#</a></h3>
3112 <p>Alerts are a special type of dialog that use the <code>role="alert"</code> attribute to signal its importance to assistive tools.
3113 Use alerts sparingly when there is no other way to communicate that something did not work as expected.</p>
3114 <p>Alerts should not be used for cases where you expect an error to happen.
3115 For example, a form control that expectes an input to fall within a restricted range should show an inline error message instead of raising an alert.</p>
3116 <h2 id="confirmation">Confirmation<a class="headerlink" href="#confirmation" title="Permanent link">#</a></h2>
3117 <p>Confirmation dialogs are supported through a separate factory function that provides a set of presets as well as a generic API. Please see the separate documentation for <a href="../components_confirmation/">confirmation dialogs</a> to learn more.</p>
3118 <h2 id="prompts">Prompts<a class="headerlink" href="#prompts" title="Permanent link">#</a></h2>
3119 <p>The most common type of dialogs are prompts that are similar to confirmation dialogs, but without the restrictions and with a regular title.
3120 These dialogs can be used universally and provide a submit and cancel button by default.</p>
3121 <p>In addition they offer an “extra” button that is placed to the left of the default buttons are can be used to offer a single additional action.
3122 A possible use case for an “extra” button would be a dialog that includes an instance of the WYSIWYG editor, the extra button could be used to trigger a message preview.</p>
3123 <h3 id="code-example">Code Example<a class="headerlink" href="#code-example" title="Permanent link">#</a></h3>
3124 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
3125 <span class="normal"> 2</span>
3126 <span class="normal"> 3</span>
3127 <span class="normal"> 4</span>
3128 <span class="normal"> 5</span>
3129 <span class="normal"> 6</span>
3130 <span class="normal"> 7</span>
3131 <span class="normal"> 8</span>
3132 <span class="normal"> 9</span>
3133 <span class="normal">10</span>
3134 <span class="normal">11</span>
3135 <span class="normal">12</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="p">&lt;</span><span class="nt">button</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;showMyDialog&quot;</span><span class="p">&gt;</span>Show the dialog<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
3136
3137 <span class="p">&lt;</span><span class="nt">template</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;myDialog&quot;</span><span class="p">&gt;</span>
3138   <span class="p">&lt;</span><span class="nt">dl</span><span class="p">&gt;</span>
3139     <span class="p">&lt;</span><span class="nt">dt</span><span class="p">&gt;</span>
3140       <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;myInput&quot;</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
3141     <span class="p">&lt;/</span><span class="nt">dt</span><span class="p">&gt;</span>
3142     <span class="p">&lt;</span><span class="nt">dd</span><span class="p">&gt;</span>
3143       <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;myInput&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;myInput&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="na">required</span> <span class="p">/&gt;</span>
3144     <span class="p">&lt;/</span><span class="nt">dd</span><span class="p">&gt;</span>
3145   <span class="p">&lt;/</span><span class="nt">dl</span><span class="p">&gt;</span>
3146 <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span>
3147 </code></pre></div></td></tr></table></div>
3148 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3149 <span class="normal">2</span>
3150 <span class="normal">3</span>
3151 <span class="normal">4</span>
3152 <span class="normal">5</span>
3153 <span class="normal">6</span>
3154 <span class="normal">7</span>
3155 <span class="normal">8</span>
3156 <span class="normal">9</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;showMyDialog&quot;</span><span class="p">)</span><span class="o">!</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&quot;click&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
3157 <span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">dialog</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dialogFactory</span><span class="p">().</span><span class="nx">fromId</span><span class="p">(</span><span class="s2">&quot;myDialog&quot;</span><span class="p">).</span><span class="nx">asPrompt</span><span class="p">();</span>
3158
3159 <span class="w">  </span><span class="nx">dialog</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&quot;primary&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
3160 <span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">myInput</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;myInput&quot;</span><span class="p">);</span>
3161
3162 <span class="w">    </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Provided title:&quot;</span><span class="p">,</span><span class="w"> </span><span class="nx">myInput</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">());</span>
3163 <span class="w">  </span><span class="p">});</span>
3164 <span class="p">});</span>
3165 </code></pre></div></td></tr></table></div>
3166 <h3 id="custom-buttons">Custom Buttons<a class="headerlink" href="#custom-buttons" title="Permanent link">#</a></h3>
3167 <p>The <code>asPrompt()</code> call permits some level of customization of the form control buttons.</p>
3168 <h4 id="customizing-the-primary-button">Customizing the Primary Button<a class="headerlink" href="#customizing-the-primary-button" title="Permanent link">#</a></h4>
3169 <p>The <code>primary</code> option is used to change the default label of the primary button.</p>
3170 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3171 <span class="normal">2</span>
3172 <span class="normal">3</span>
3173 <span class="normal">4</span>
3174 <span class="normal">5</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="nx">dialogFactory</span><span class="p">()</span>
3175 <span class="w">  </span><span class="p">.</span><span class="nx">fromId</span><span class="p">(</span><span class="s2">&quot;myDialog&quot;</span><span class="p">)</span>
3176 <span class="w">  </span><span class="p">.</span><span class="nx">asPrompt</span><span class="p">({</span>
3177 <span class="w">    </span><span class="nx">primary</span><span class="o">:</span><span class="w"> </span><span class="kt">Language.get</span><span class="p">(</span><span class="s2">&quot;wcf.dialog.button.primary&quot;</span><span class="p">),</span>
3178 <span class="w">  </span><span class="p">});</span>
3179 </code></pre></div></td></tr></table></div>
3180 <h3 id="adding-an-extra-button">Adding an Extra Button<a class="headerlink" href="#adding-an-extra-button" title="Permanent link">#</a></h3>
3181 <p>The extra button has no default label, enabling it requires you to provide a readable name.</p>
3182 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
3183 <span class="normal"> 2</span>
3184 <span class="normal"> 3</span>
3185 <span class="normal"> 4</span>
3186 <span class="normal"> 5</span>
3187 <span class="normal"> 6</span>
3188 <span class="normal"> 7</span>
3189 <span class="normal"> 8</span>
3190 <span class="normal"> 9</span>
3191 <span class="normal">10</span>
3192 <span class="normal">11</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">dialog</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dialogFactory</span><span class="p">()</span>
3193 <span class="w">  </span><span class="p">.</span><span class="nx">fromId</span><span class="p">(</span><span class="s2">&quot;myDialog&quot;</span><span class="p">)</span>
3194 <span class="w">  </span><span class="p">.</span><span class="nx">asPrompt</span><span class="p">({</span>
3195 <span class="w">    </span><span class="nx">extra</span><span class="o">:</span><span class="w"> </span><span class="kt">Language.get</span><span class="p">(</span><span class="s2">&quot;my.extra.button.name&quot;</span><span class="p">),</span>
3196 <span class="w">  </span><span class="p">});</span>
3197
3198 <span class="nx">dialog</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&quot;extra&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
3199 <span class="w">  </span><span class="c1">// The extra button does nothing on its own. If you want</span>
3200 <span class="w">  </span><span class="c1">// to close the button after performing an action you’ll</span>
3201 <span class="w">  </span><span class="c1">// need to call `dialog.close()` yourself.</span>
3202 <span class="p">});</span>
3203 </code></pre></div></td></tr></table></div>
3204 <h2 id="interacting-with-dialogs">Interacting with dialogs<a class="headerlink" href="#interacting-with-dialogs" title="Permanent link">#</a></h2>
3205 <p>Dialogs are represented by the <code>&lt;woltlab-core-dialog&gt;</code> element that exposes a set of properties and methods to interact with it.</p>
3206 <h3 id="opening-and-closing-dialogs">Opening and Closing Dialogs<a class="headerlink" href="#opening-and-closing-dialogs" title="Permanent link">#</a></h3>
3207 <p>You can open a dialog through the <code>.show()</code> method that expects the title of the dialog as the only argument.
3208 Check the <code>.open</code> property to determine if the dialog is currently open.</p>
3209 <p>Programmatically closing a dialog is possibly through <code>.close()</code>.</p>
3210 <h3 id="accessing-the-content">Accessing the Content<a class="headerlink" href="#accessing-the-content" title="Permanent link">#</a></h3>
3211 <p>All contents of a dialog exists within a child element that can be accessed through the <code>content</code> property.</p>
3212 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3213 <span class="normal">2</span>
3214 <span class="normal">3</span>
3215 <span class="normal">4</span>
3216 <span class="normal">5</span>
3217 <span class="normal">6</span>
3218 <span class="normal">7</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="c1">// Add some text to the dialog.</span>
3219 <span class="kd">const</span><span class="w"> </span><span class="nx">p</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;p&quot;</span><span class="p">);</span>
3220 <span class="nx">p</span><span class="p">.</span><span class="nx">textContent</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;Hello World&quot;</span><span class="p">;</span>
3221 <span class="nx">dialog</span><span class="p">.</span><span class="nx">content</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">p</span><span class="p">);</span>
3222
3223 <span class="c1">// Find a text input inside the dialog.</span>
3224 <span class="kd">const</span><span class="w"> </span><span class="nx">input</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dialog</span><span class="p">.</span><span class="nx">content</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;input[type=&quot;text&quot;]&#39;</span><span class="p">);</span>
3225 </code></pre></div></td></tr></table></div>
3226 <h3 id="disabling-the-submit-button-of-a-dialog">Disabling the Submit Button of a Dialog<a class="headerlink" href="#disabling-the-submit-button-of-a-dialog" title="Permanent link">#</a></h3>
3227 <p>You can prevent the dialog submission until a condition is met, allowing you to dynamically enable or disable the button at will.</p>
3228 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3229 <span class="normal">2</span>
3230 <span class="normal">3</span>
3231 <span class="normal">4</span>
3232 <span class="normal">5</span>
3233 <span class="normal">6</span>
3234 <span class="normal">7</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="nx">dialog</span><span class="p">.</span><span class="nx">incomplete</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span>
3235
3236 <span class="kd">const</span><span class="w"> </span><span class="nx">checkbox</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dialog</span><span class="p">.</span><span class="nx">content</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;input[type=&quot;checkbox&quot;]&#39;</span><span class="p">)</span><span class="o">!</span><span class="p">;</span>
3237 <span class="nx">checkbox</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&quot;change&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
3238 <span class="w">  </span><span class="c1">// Block the dialog submission unless the checkbox is checked.</span>
3239 <span class="w">  </span><span class="nx">dialog</span><span class="p">.</span><span class="nx">incomplete</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">!</span><span class="nx">checkbox</span><span class="p">.</span><span class="nx">checked</span><span class="p">;</span>
3240 <span class="p">});</span>
3241 </code></pre></div></td></tr></table></div>
3242 <h3 id="managing-an-instance-of-a-dialog">Managing an Instance of a Dialog<a class="headerlink" href="#managing-an-instance-of-a-dialog" title="Permanent link">#</a></h3>
3243 <p>The old API for dialogs implicitly kept track of the instance by binding it to the <code>this</code> parameter as seen in calls like <code>UiDialog.open(this);</code>.
3244 The new implementation requires to you to keep track of the dialog on your own.</p>
3245 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
3246 <span class="normal"> 2</span>
3247 <span class="normal"> 3</span>
3248 <span class="normal"> 4</span>
3249 <span class="normal"> 5</span>
3250 <span class="normal"> 6</span>
3251 <span class="normal"> 7</span>
3252 <span class="normal"> 8</span>
3253 <span class="normal"> 9</span>
3254 <span class="normal">10</span>
3255 <span class="normal">11</span>
3256 <span class="normal">12</span>
3257 <span class="normal">13</span>
3258 <span class="normal">14</span>
3259 <span class="normal">15</span>
3260 <span class="normal">16</span>
3261 <span class="normal">17</span>
3262 <span class="normal">18</span>
3263 <span class="normal">19</span>
3264 <span class="normal">20</span>
3265 <span class="normal">21</span>
3266 <span class="normal">22</span>
3267 <span class="normal">23</span>
3268 <span class="normal">24</span>
3269 <span class="normal">25</span>
3270 <span class="normal">26</span>
3271 <span class="normal">27</span>
3272 <span class="normal">28</span>
3273 <span class="normal">29</span>
3274 <span class="normal">30</span>
3275 <span class="normal">31</span>
3276 <span class="normal">32</span>
3277 <span class="normal">33</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">class</span><span class="w"> </span><span class="nx">MyComponent</span><span class="w"> </span><span class="p">{</span>
3278 <span class="w">  </span><span class="err">#</span><span class="nx">dialog?</span><span class="o">:</span><span class="w"> </span><span class="kt">WoltlabCoreDialogElement</span><span class="p">;</span>
3279
3280 <span class="w">  </span><span class="kr">constructor</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
3281 <span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">&quot;.myButton&quot;</span><span class="p">)</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="nx">HTMLButtonElement</span><span class="p">;</span>
3282 <span class="w">    </span><span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&quot;click&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
3283 <span class="w">      </span><span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">showGreeting</span><span class="p">(</span><span class="nx">button</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
3284 <span class="w">    </span><span class="p">});</span>
3285 <span class="w">  </span><span class="p">}</span>
3286
3287 <span class="w">  </span><span class="err">#</span><span class="nx">showGreeting</span><span class="p">(</span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="kc">undefined</span><span class="p">)</span><span class="o">:</span><span class="w"> </span><span class="ow">void</span><span class="w"> </span><span class="p">{</span>
3288 <span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">dialog</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">getDialog</span><span class="p">();</span>
3289
3290 <span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">p</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dialog</span><span class="p">.</span><span class="nx">content</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">&quot;p&quot;</span><span class="p">)</span><span class="o">!</span><span class="p">;</span>
3291 <span class="w">    </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">name</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="kc">undefined</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
3292 <span class="w">      </span><span class="nx">p</span><span class="p">.</span><span class="nx">textContent</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;Hello World&quot;</span><span class="p">;</span>
3293 <span class="w">    </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
3294 <span class="w">      </span><span class="nx">p</span><span class="p">.</span><span class="nx">textContent</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`Hello </span><span class="si">${</span><span class="nx">name</span><span class="si">}</span><span class="sb">`</span><span class="p">;</span>
3295 <span class="w">    </span><span class="p">}</span>
3296
3297 <span class="w">    </span><span class="nx">dialog</span><span class="p">.</span><span class="nx">show</span><span class="p">(</span><span class="s2">&quot;Greetings!&quot;</span><span class="p">);</span>
3298 <span class="w">  </span><span class="p">}</span>
3299
3300 <span class="w">  </span><span class="err">#</span><span class="nx">getDialog</span><span class="p">()</span><span class="o">:</span><span class="w"> </span><span class="nx">WoltlabCoreDialogElement</span><span class="w"> </span><span class="p">{</span>
3301 <span class="w">    </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">dialog</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="kc">undefined</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
3302 <span class="w">      </span><span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">dialog</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dialogFactory</span><span class="p">()</span>
3303 <span class="w">        </span><span class="p">.</span><span class="nx">fromHtml</span><span class="p">(</span><span class="s2">&quot;&lt;p&gt;Hello from MyComponent&lt;/p&gt;&quot;</span><span class="p">)</span>
3304 <span class="w">        </span><span class="p">.</span><span class="nx">withoutControls</span><span class="p">();</span>
3305 <span class="w">    </span><span class="p">}</span>
3306
3307 <span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="err">#</span><span class="nx">dialog</span><span class="p">;</span>
3308 <span class="w">  </span><span class="p">}</span>
3309 <span class="p">}</span>
3310 </code></pre></div></td></tr></table></div>
3311 <h3 id="event-access">Event Access<a class="headerlink" href="#event-access" title="Permanent link">#</a></h3>
3312 <p>You can bind event listeners to specialized events to get notified of events and to modify its behavior.</p>
3313 <h4 id="afterclose"><code>afterClose</code><a class="headerlink" href="#afterclose" title="Permanent link">#</a></h4>
3314 <p><em>This event cannot be canceled.</em></p>
3315 <p>Fires when the dialog has closed.</p>
3316 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3317 <span class="normal">2</span>
3318 <span class="normal">3</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="nx">dialog</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&quot;afterClose&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
3319 <span class="w">  </span><span class="c1">// Dialog was closed.</span>
3320 <span class="p">});</span>
3321 </code></pre></div></td></tr></table></div>
3322 <h4 id="close"><code>close</code><a class="headerlink" href="#close" title="Permanent link">#</a></h4>
3323 <p>Fires when the dialog is about to close.</p>
3324 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3325 <span class="normal">2</span>
3326 <span class="normal">3</span>
3327 <span class="normal">4</span>
3328 <span class="normal">5</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="nx">dialog</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&quot;close&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">(</span><span class="nx">event</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
3329 <span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">someCondition</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
3330 <span class="w">    </span><span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
3331 <span class="w">  </span><span class="p">}</span>
3332 <span class="p">});</span>
3333 </code></pre></div></td></tr></table></div>
3334 <h4 id="cancel"><code>cancel</code><a class="headerlink" href="#cancel" title="Permanent link">#</a></h4>
3335 <p>Fires only when there is a “Cancel” button and the user has either pressed that button or clicked on the modal backdrop.
3336 The dialog will close if the event is not canceled.</p>
3337 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3338 <span class="normal">2</span>
3339 <span class="normal">3</span>
3340 <span class="normal">4</span>
3341 <span class="normal">5</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="nx">dialog</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&quot;cancel&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">(</span><span class="nx">event</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
3342 <span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">someCondition</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
3343 <span class="w">    </span><span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
3344 <span class="w">  </span><span class="p">}</span>
3345 <span class="p">});</span>
3346 </code></pre></div></td></tr></table></div>
3347 <h4 id="extra"><code>extra</code><a class="headerlink" href="#extra" title="Permanent link">#</a></h4>
3348 <p><em>This event cannot be canceled.</em></p>
3349 <p>Fires when an extra button is present and the button was clicked by the user.
3350 This event does nothing on its own and is supported for dialogs of type “Prompt” only.</p>
3351 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3352 <span class="normal">2</span>
3353 <span class="normal">3</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="nx">dialog</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&quot;extra&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
3354 <span class="w">  </span><span class="c1">// The extra button was clicked.</span>
3355 <span class="p">});</span>
3356 </code></pre></div></td></tr></table></div>
3357 <h4 id="primary"><code>primary</code><a class="headerlink" href="#primary" title="Permanent link">#</a></h4>
3358 <p><em>This event cannot be canceled.</em></p>
3359 <p>Fires only when there is a primary action button and the user has either pressed that button or submitted the form through keyboard controls.</p>
3360 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3361 <span class="normal">2</span>
3362 <span class="normal">3</span>
3363 <span class="normal">4</span>
3364 <span class="normal">5</span>
3365 <span class="normal">6</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="nx">dialog</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&quot;primary&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
3366 <span class="w">  </span><span class="c1">// The primary action button was clicked or the</span>
3367 <span class="w">  </span><span class="c1">// form was submitted through keyboard controls.</span>
3368 <span class="w">  </span><span class="c1">//</span>
3369 <span class="w">  </span><span class="c1">// The `validate` event has completed successfully.</span>
3370 <span class="p">});</span>
3371 </code></pre></div></td></tr></table></div>
3372 <h4 id="validate"><code>validate</code><a class="headerlink" href="#validate" title="Permanent link">#</a></h4>
3373 <p>Fires only when there is a form and the user has pressed the primary action button or submitted the form through keyboard controls.
3374 Canceling this event is interpreted as a form validation failure.</p>
3375 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
3376 <span class="normal"> 2</span>
3377 <span class="normal"> 3</span>
3378 <span class="normal"> 4</span>
3379 <span class="normal"> 5</span>
3380 <span class="normal"> 6</span>
3381 <span class="normal"> 7</span>
3382 <span class="normal"> 8</span>
3383 <span class="normal"> 9</span>
3384 <span class="normal">10</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">input</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;input&quot;</span><span class="p">);</span>
3385 <span class="nx">dialog</span><span class="p">.</span><span class="nx">content</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">input</span><span class="p">);</span>
3386
3387 <span class="nx">dialog</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&quot;validate&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">(</span><span class="nx">event</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
3388 <span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">()</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
3389 <span class="w">    </span><span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
3390
3391 <span class="w">    </span><span class="c1">// Display an inline error message.</span>
3392 <span class="w">  </span><span class="p">}</span>
3393 <span class="p">});</span>
3394 </code></pre></div></td></tr></table></div>
3395
3396   <hr>
3397 <div class="md-source-file">
3398   <small>
3399
3400       Last update:
3401       2022-10-14
3402
3403   </small>
3404 </div>
3405
3406
3407
3408
3409
3410
3411               </article>
3412             </div>
3413
3414
3415         </div>
3416
3417       </main>
3418
3419         <footer class="md-footer">
3420
3421   <div class="md-footer-meta md-typeset">
3422     <div class="md-footer-meta__inner md-grid">
3423       <div class="md-copyright">
3424
3425     <div class="md-copyright__highlight">
3426       Copyright © 2020 WoltLab GmbH
3427     </div>
3428
3429
3430     Made with
3431     <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
3432       Material for MkDocs
3433     </a>
3434
3435 </div>
3436
3437         <div class="md-copyright">
3438         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
3439         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
3440 </div>
3441
3442     </div>
3443   </div>
3444 </footer>
3445
3446     </div>
3447     <div class="md-dialog" data-md-component="dialog">
3448       <div class="md-dialog__inner md-typeset"></div>
3449     </div>
3450
3451     <script id="__config" type="application/json">{"base": "../..", "features": ["navigation.tracking"], "search": "../../assets/javascripts/workers/search.208ed371.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script>
3452
3453
3454       <script src="../../assets/javascripts/bundle.b4d07000.min.js"></script>
3455
3456
3457   </body>
3458 </html>