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