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.0, mkdocs-material-8.5.4">
  15
  16
  17
  18         <title>Dialog - WoltLab Suite Documentation</title>
  19
  20
  21
  22       <link rel="stylesheet" href="../../assets/stylesheets/main.80dcb947.min.css">
  23
  24
  25         <link rel="stylesheet" href="../../assets/stylesheets/palette.cbb835fc.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="" 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.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 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.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 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="#managing-an-instance-of-a-dialog" class="md-nav__link">
1024     Managing an Instance of a Dialog
1025   </a>
1026
1027 </li>
1028
1029           <li class="md-nav__item">
1030   <a href="#event-access" class="md-nav__link">
1031     Event Access
1032   </a>
1033
1034     <nav class="md-nav" aria-label="Event Access">
1035       <ul class="md-nav__list">
1036
1037           <li class="md-nav__item">
1038   <a href="#afterclose" class="md-nav__link">
1039     afterClose
1040   </a>
1041
1042 </li>
1043
1044           <li class="md-nav__item">
1045   <a href="#close" class="md-nav__link">
1046     close
1047   </a>
1048
1049 </li>
1050
1051           <li class="md-nav__item">
1052   <a href="#cancel" class="md-nav__link">
1053     cancel
1054   </a>
1055
1056 </li>
1057
1058           <li class="md-nav__item">
1059   <a href="#extra" class="md-nav__link">
1060     extra
1061   </a>
1062
1063 </li>
1064
1065           <li class="md-nav__item">
1066   <a href="#primary" class="md-nav__link">
1067     primary
1068   </a>
1069
1070 </li>
1071
1072           <li class="md-nav__item">
1073   <a href="#validate" class="md-nav__link">
1074     validate
1075   </a>
1076
1077 </li>
1078
1079       </ul>
1080     </nav>
1081
1082 </li>
1083
1084       </ul>
1085     </nav>
1086
1087 </li>
1088
1089     </ul>
1090
1091 </nav>
1092
1093     </li>
1094
1095
1096
1097
1098         </ul>
1099       </nav>
1100     </li>
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111     <li class="md-nav__item md-nav__item--nested">
1112
1113
1114         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_4" type="checkbox" id="__nav_4_4" >
1115
1116
1117
1118
1119         <label class="md-nav__link" for="__nav_4_4">
1120           New API
1121           <span class="md-nav__icon md-icon"></span>
1122         </label>
1123
1124       <nav class="md-nav" aria-label="New API" data-md-level="2">
1125         <label class="md-nav__title" for="__nav_4_4">
1126           <span class="md-nav__icon md-icon"></span>
1127           New API
1128         </label>
1129         <ul class="md-nav__list" data-md-scrollfix>
1130
1131
1132
1133
1134
1135
1136     <li class="md-nav__item">
1137       <a href="../new-api_writing-a-module/" class="md-nav__link">
1138         Writing a module
1139       </a>
1140     </li>
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150     <li class="md-nav__item">
1151       <a href="../new-api_data-structures/" class="md-nav__link">
1152         Data Structures
1153       </a>
1154     </li>
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164     <li class="md-nav__item">
1165       <a href="../new-api_core/" class="md-nav__link">
1166         Core Functions
1167       </a>
1168     </li>
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178     <li class="md-nav__item">
1179       <a href="../new-api_dom/" class="md-nav__link">
1180         DOM
1181       </a>
1182     </li>
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192     <li class="md-nav__item">
1193       <a href="../new-api_events/" class="md-nav__link">
1194         Event Handling
1195       </a>
1196     </li>
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206     <li class="md-nav__item">
1207       <a href="../new-api_ajax/" class="md-nav__link">
1208         Ajax
1209       </a>
1210     </li>
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220     <li class="md-nav__item">
1221       <a href="../new-api_dialogs/" class="md-nav__link">
1222         Dialogs
1223       </a>
1224     </li>
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234     <li class="md-nav__item">
1235       <a href="../new-api_browser/" class="md-nav__link">
1236         Browser and Screen Sizes
1237       </a>
1238     </li>
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248     <li class="md-nav__item">
1249       <a href="../new-api_ui/" class="md-nav__link">
1250         User Interface
1251       </a>
1252     </li>
1253
1254
1255
1256
1257         </ul>
1258       </nav>
1259     </li>
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269     <li class="md-nav__item">
1270       <a href="../legacy-api/" class="md-nav__link">
1271         Legacy API
1272       </a>
1273     </li>
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283     <li class="md-nav__item">
1284       <a href="../helper-functions/" class="md-nav__link">
1285         Helper Functions
1286       </a>
1287     </li>
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297     <li class="md-nav__item">
1298       <a href="../code-snippets/" class="md-nav__link">
1299         Code Snippets
1300       </a>
1301     </li>
1302
1303
1304
1305
1306         </ul>
1307       </nav>
1308     </li>
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320     <li class="md-nav__item md-nav__item--nested">
1321
1322
1323         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
1324
1325
1326
1327
1328         <label class="md-nav__link" for="__nav_5">
1329           Package Components
1330           <span class="md-nav__icon md-icon"></span>
1331         </label>
1332
1333       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
1334         <label class="md-nav__title" for="__nav_5">
1335           <span class="md-nav__icon md-icon"></span>
1336           Package Components
1337         </label>
1338         <ul class="md-nav__list" data-md-scrollfix>
1339
1340
1341
1342
1343
1344
1345     <li class="md-nav__item">
1346       <a href="../../package/package-xml/" class="md-nav__link">
1347         package.xml
1348       </a>
1349     </li>
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360     <li class="md-nav__item md-nav__item--nested">
1361
1362
1363         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
1364
1365
1366
1367
1368         <label class="md-nav__link" for="__nav_5_2">
1369           PIPs
1370           <span class="md-nav__icon md-icon"></span>
1371         </label>
1372
1373       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
1374         <label class="md-nav__title" for="__nav_5_2">
1375           <span class="md-nav__icon md-icon"></span>
1376           PIPs
1377         </label>
1378         <ul class="md-nav__list" data-md-scrollfix>
1379
1380
1381
1382
1383
1384
1385     <li class="md-nav__item">
1386       <a href="../../package/pip/" class="md-nav__link">
1387         Overview
1388       </a>
1389     </li>
1390
1391
1392
1393
1394
1395
1396
1397
1398
1399     <li class="md-nav__item">
1400       <a href="../../package/pip/acl-option/" class="md-nav__link">
1401         aclOption
1402       </a>
1403     </li>
1404
1405
1406
1407
1408
1409
1410
1411
1412
1413     <li class="md-nav__item">
1414       <a href="../../package/pip/acp-menu/" class="md-nav__link">
1415         acpMenu
1416       </a>
1417     </li>
1418
1419
1420
1421
1422
1423
1424
1425
1426
1427     <li class="md-nav__item">
1428       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
1429         acpSearchProvider
1430       </a>
1431     </li>
1432
1433
1434
1435
1436
1437
1438
1439
1440
1441     <li class="md-nav__item">
1442       <a href="../../package/pip/acp-template/" class="md-nav__link">
1443         acpTemplate
1444       </a>
1445     </li>
1446
1447
1448
1449
1450
1451
1452
1453
1454
1455     <li class="md-nav__item">
1456       <a href="../../package/pip/acp-template-delete/" class="md-nav__link">
1457         acpTemplateDelete
1458       </a>
1459     </li>
1460
1461
1462
1463
1464
1465
1466
1467
1468
1469     <li class="md-nav__item">
1470       <a href="../../package/pip/bbcode/" class="md-nav__link">
1471         bbcode
1472       </a>
1473     </li>
1474
1475
1476
1477
1478
1479
1480
1481
1482
1483     <li class="md-nav__item">
1484       <a href="../../package/pip/box/" class="md-nav__link">
1485         box
1486       </a>
1487     </li>
1488
1489
1490
1491
1492
1493
1494
1495
1496
1497     <li class="md-nav__item">
1498       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1499         clipboardAction
1500       </a>
1501     </li>
1502
1503
1504
1505
1506
1507
1508
1509
1510
1511     <li class="md-nav__item">
1512       <a href="../../package/pip/core-object/" class="md-nav__link">
1513         coreObject
1514       </a>
1515     </li>
1516
1517
1518
1519
1520
1521
1522
1523
1524
1525     <li class="md-nav__item">
1526       <a href="../../package/pip/cronjob/" class="md-nav__link">
1527         cronjob
1528       </a>
1529     </li>
1530
1531
1532
1533
1534
1535
1536
1537
1538
1539     <li class="md-nav__item">
1540       <a href="../../package/pip/database/" class="md-nav__link">
1541         database
1542       </a>
1543     </li>
1544
1545
1546
1547
1548
1549
1550
1551
1552
1553     <li class="md-nav__item">
1554       <a href="../../package/pip/event-listener/" class="md-nav__link">
1555         eventListener
1556       </a>
1557     </li>
1558
1559
1560
1561
1562
1563
1564
1565
1566
1567     <li class="md-nav__item">
1568       <a href="../../package/pip/file/" class="md-nav__link">
1569         file
1570       </a>
1571     </li>
1572
1573
1574
1575
1576
1577
1578
1579
1580
1581     <li class="md-nav__item">
1582       <a href="../../package/pip/file-delete/" class="md-nav__link">
1583         fileDelete
1584       </a>
1585     </li>
1586
1587
1588
1589
1590
1591
1592
1593
1594
1595     <li class="md-nav__item">
1596       <a href="../../package/pip/language/" class="md-nav__link">
1597         language
1598       </a>
1599     </li>
1600
1601
1602
1603
1604
1605
1606
1607
1608
1609     <li class="md-nav__item">
1610       <a href="../../package/pip/media-provider/" class="md-nav__link">
1611         mediaProvider
1612       </a>
1613     </li>
1614
1615
1616
1617
1618
1619
1620
1621
1622
1623     <li class="md-nav__item">
1624       <a href="../../package/pip/menu/" class="md-nav__link">
1625         menu
1626       </a>
1627     </li>
1628
1629
1630
1631
1632
1633
1634
1635
1636
1637     <li class="md-nav__item">
1638       <a href="../../package/pip/menu-item/" class="md-nav__link">
1639         menuItem
1640       </a>
1641     </li>
1642
1643
1644
1645
1646
1647
1648
1649
1650
1651     <li class="md-nav__item">
1652       <a href="../../package/pip/object-type/" class="md-nav__link">
1653         objectType
1654       </a>
1655     </li>
1656
1657
1658
1659
1660
1661
1662
1663
1664
1665     <li class="md-nav__item">
1666       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1667         objectTypeDefinition
1668       </a>
1669     </li>
1670
1671
1672
1673
1674
1675
1676
1677
1678
1679     <li class="md-nav__item">
1680       <a href="../../package/pip/option/" class="md-nav__link">
1681         option
1682       </a>
1683     </li>
1684
1685
1686
1687
1688
1689
1690
1691
1692
1693     <li class="md-nav__item">
1694       <a href="../../package/pip/page/" class="md-nav__link">
1695         page
1696       </a>
1697     </li>
1698
1699
1700
1701
1702
1703
1704
1705
1706
1707     <li class="md-nav__item">
1708       <a href="../../package/pip/pip/" class="md-nav__link">
1709         pip
1710       </a>
1711     </li>
1712
1713
1714
1715
1716
1717
1718
1719
1720
1721     <li class="md-nav__item">
1722       <a href="../../package/pip/script/" class="md-nav__link">
1723         script
1724       </a>
1725     </li>
1726
1727
1728
1729
1730
1731
1732
1733
1734
1735     <li class="md-nav__item">
1736       <a href="../../package/pip/smiley/" class="md-nav__link">
1737         smiley
1738       </a>
1739     </li>
1740
1741
1742
1743
1744
1745
1746
1747
1748
1749     <li class="md-nav__item">
1750       <a href="../../package/pip/sql/" class="md-nav__link">
1751         sql
1752       </a>
1753     </li>
1754
1755
1756
1757
1758
1759
1760
1761
1762
1763     <li class="md-nav__item">
1764       <a href="../../package/pip/style/" class="md-nav__link">
1765         style
1766       </a>
1767     </li>
1768
1769
1770
1771
1772
1773
1774
1775
1776
1777     <li class="md-nav__item">
1778       <a href="../../package/pip/template/" class="md-nav__link">
1779         template
1780       </a>
1781     </li>
1782
1783
1784
1785
1786
1787
1788
1789
1790
1791     <li class="md-nav__item">
1792       <a href="../../package/pip/template-delete/" class="md-nav__link">
1793         templateDelete
1794       </a>
1795     </li>
1796
1797
1798
1799
1800
1801
1802
1803
1804
1805     <li class="md-nav__item">
1806       <a href="../../package/pip/template-listener/" class="md-nav__link">
1807         templateListener
1808       </a>
1809     </li>
1810
1811
1812
1813
1814
1815
1816
1817
1818
1819     <li class="md-nav__item">
1820       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1821         userGroupOption
1822       </a>
1823     </li>
1824
1825
1826
1827
1828
1829
1830
1831
1832
1833     <li class="md-nav__item">
1834       <a href="../../package/pip/user-menu/" class="md-nav__link">
1835         userMenu
1836       </a>
1837     </li>
1838
1839
1840
1841
1842
1843
1844
1845
1846
1847     <li class="md-nav__item">
1848       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1849         userNotificationEvent
1850       </a>
1851     </li>
1852
1853
1854
1855
1856
1857
1858
1859
1860
1861     <li class="md-nav__item">
1862       <a href="../../package/pip/user-option/" class="md-nav__link">
1863         userOption
1864       </a>
1865     </li>
1866
1867
1868
1869
1870
1871
1872
1873
1874
1875     <li class="md-nav__item">
1876       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1877         userProfileMenu
1878       </a>
1879     </li>
1880
1881
1882
1883
1884         </ul>
1885       </nav>
1886     </li>
1887
1888
1889
1890
1891
1892
1893
1894
1895
1896     <li class="md-nav__item">
1897       <a href="../../package/database-php-api/" class="md-nav__link">
1898         Database PHP API
1899       </a>
1900     </li>
1901
1902
1903
1904
1905         </ul>
1906       </nav>
1907     </li>
1908
1909
1910
1911
1912
1913
1914
1915
1916
1917
1918
1919     <li class="md-nav__item md-nav__item--nested">
1920
1921
1922         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1923
1924
1925
1926
1927         <label class="md-nav__link" for="__nav_6">
1928           Migration
1929           <span class="md-nav__icon md-icon"></span>
1930         </label>
1931
1932       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1933         <label class="md-nav__title" for="__nav_6">
1934           <span class="md-nav__icon md-icon"></span>
1935           Migration
1936         </label>
1937         <ul class="md-nav__list" data-md-scrollfix>
1938
1939
1940
1941
1942
1943
1944
1945     <li class="md-nav__item md-nav__item--nested">
1946
1947
1948         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1949
1950
1951
1952
1953         <label class="md-nav__link" for="__nav_6_1">
1954           From WoltLab Suite 5.5
1955           <span class="md-nav__icon md-icon"></span>
1956         </label>
1957
1958       <nav class="md-nav" aria-label="From WoltLab Suite 5.5" data-md-level="2">
1959         <label class="md-nav__title" for="__nav_6_1">
1960           <span class="md-nav__icon md-icon"></span>
1961           From WoltLab Suite 5.5
1962         </label>
1963         <ul class="md-nav__list" data-md-scrollfix>
1964
1965
1966
1967
1968
1969
1970     <li class="md-nav__item">
1971       <a href="../../migration/wsc55/php/" class="md-nav__link">
1972         PHP API
1973       </a>
1974     </li>
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984     <li class="md-nav__item">
1985       <a href="../../migration/wsc55/javascript/" class="md-nav__link">
1986         TypeScript and JavaScript
1987       </a>
1988     </li>
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998     <li class="md-nav__item">
1999       <a href="../../migration/wsc55/templates/" class="md-nav__link">
2000         Templates
2001       </a>
2002     </li>
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012     <li class="md-nav__item">
2013       <a href="../../migration/wsc55/icons/" class="md-nav__link">
2014         Icons
2015       </a>
2016     </li>
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026     <li class="md-nav__item">
2027       <a href="../../migration/wsc55/dialogs/" class="md-nav__link">
2028         Dialogs
2029       </a>
2030     </li>
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040     <li class="md-nav__item">
2041       <a href="../../migration/wsc55/libraries/" class="md-nav__link">
2042         Third Party Libraries
2043       </a>
2044     </li>
2045
2046
2047
2048
2049
2050
2051
2052
2053
2054     <li class="md-nav__item">
2055       <a href="../../migration/wsc55/deprecations_removals/" class="md-nav__link">
2056         Deprecations and Removals
2057       </a>
2058     </li>
2059
2060
2061
2062
2063         </ul>
2064       </nav>
2065     </li>
2066
2067
2068
2069
2070
2071
2072
2073
2074
2075
2076     <li class="md-nav__item md-nav__item--nested">
2077
2078
2079         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
2080
2081
2082
2083
2084         <label class="md-nav__link" for="__nav_6_2">
2085           From WoltLab Suite 5.4
2086           <span class="md-nav__icon md-icon"></span>
2087         </label>
2088
2089       <nav class="md-nav" aria-label="From WoltLab Suite 5.4" data-md-level="2">
2090         <label class="md-nav__title" for="__nav_6_2">
2091           <span class="md-nav__icon md-icon"></span>
2092           From WoltLab Suite 5.4
2093         </label>
2094         <ul class="md-nav__list" data-md-scrollfix>
2095
2096
2097
2098
2099
2100
2101     <li class="md-nav__item">
2102       <a href="../../migration/wsc54/php/" class="md-nav__link">
2103         PHP API
2104       </a>
2105     </li>
2106
2107
2108
2109
2110
2111
2112
2113
2114
2115     <li class="md-nav__item">
2116       <a href="../../migration/wsc54/javascript/" class="md-nav__link">
2117         TypeScript and JavaScript
2118       </a>
2119     </li>
2120
2121
2122
2123
2124
2125
2126
2127
2128
2129     <li class="md-nav__item">
2130       <a href="../../migration/wsc54/templates/" class="md-nav__link">
2131         Templates
2132       </a>
2133     </li>
2134
2135
2136
2137
2138
2139
2140
2141
2142
2143     <li class="md-nav__item">
2144       <a href="../../migration/wsc54/libraries/" class="md-nav__link">
2145         Third Party Libraries
2146       </a>
2147     </li>
2148
2149
2150
2151
2152
2153
2154
2155
2156
2157     <li class="md-nav__item">
2158       <a href="../../migration/wsc54/deprecations_removals/" class="md-nav__link">
2159         Deprecations and Removals
2160       </a>
2161     </li>
2162
2163
2164
2165
2166         </ul>
2167       </nav>
2168     </li>
2169
2170
2171
2172
2173
2174
2175
2176
2177
2178
2179     <li class="md-nav__item md-nav__item--nested">
2180
2181
2182         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
2183
2184
2185
2186
2187         <label class="md-nav__link" for="__nav_6_3">
2188           From WoltLab Suite 5.3
2189           <span class="md-nav__icon md-icon"></span>
2190         </label>
2191
2192       <nav class="md-nav" aria-label="From WoltLab Suite 5.3" data-md-level="2">
2193         <label class="md-nav__title" for="__nav_6_3">
2194           <span class="md-nav__icon md-icon"></span>
2195           From WoltLab Suite 5.3
2196         </label>
2197         <ul class="md-nav__list" data-md-scrollfix>
2198
2199
2200
2201
2202
2203
2204     <li class="md-nav__item">
2205       <a href="../../migration/wsc53/php/" class="md-nav__link">
2206         PHP API
2207       </a>
2208     </li>
2209
2210
2211
2212
2213
2214
2215
2216
2217
2218     <li class="md-nav__item">
2219       <a href="../../migration/wsc53/session/" class="md-nav__link">
2220         Session Handling and Authentication
2221       </a>
2222     </li>
2223
2224
2225
2226
2227
2228
2229
2230
2231
2232     <li class="md-nav__item">
2233       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
2234         TypeScript and JavaScript
2235       </a>
2236     </li>
2237
2238
2239
2240
2241
2242
2243
2244
2245
2246     <li class="md-nav__item">
2247       <a href="../../migration/wsc53/templates/" class="md-nav__link">
2248         Templates
2249       </a>
2250     </li>
2251
2252
2253
2254
2255
2256
2257
2258
2259
2260     <li class="md-nav__item">
2261       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
2262         Third Party Libraries
2263       </a>
2264     </li>
2265
2266
2267
2268
2269         </ul>
2270       </nav>
2271     </li>
2272
2273
2274
2275
2276
2277
2278
2279
2280
2281
2282     <li class="md-nav__item md-nav__item--nested">
2283
2284
2285         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
2286
2287
2288
2289
2290         <label class="md-nav__link" for="__nav_6_4">
2291           From WoltLab Suite 5.2
2292           <span class="md-nav__icon md-icon"></span>
2293         </label>
2294
2295       <nav class="md-nav" aria-label="From WoltLab Suite 5.2" data-md-level="2">
2296         <label class="md-nav__title" for="__nav_6_4">
2297           <span class="md-nav__icon md-icon"></span>
2298           From WoltLab Suite 5.2
2299         </label>
2300         <ul class="md-nav__list" data-md-scrollfix>
2301
2302
2303
2304
2305
2306
2307     <li class="md-nav__item">
2308       <a href="../../migration/wsc52/php/" class="md-nav__link">
2309         PHP API
2310       </a>
2311     </li>
2312
2313
2314
2315
2316
2317
2318
2319
2320
2321     <li class="md-nav__item">
2322       <a href="../../migration/wsc52/templates/" class="md-nav__link">
2323         Templates and Languages
2324       </a>
2325     </li>
2326
2327
2328
2329
2330
2331
2332
2333
2334
2335     <li class="md-nav__item">
2336       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
2337         Third Party Libraries
2338       </a>
2339     </li>
2340
2341
2342
2343
2344         </ul>
2345       </nav>
2346     </li>
2347
2348
2349
2350
2351
2352
2353
2354
2355
2356
2357     <li class="md-nav__item md-nav__item--nested">
2358
2359
2360         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
2361
2362
2363
2364
2365         <label class="md-nav__link" for="__nav_6_5">
2366           From WoltLab Suite 3.1
2367           <span class="md-nav__icon md-icon"></span>
2368         </label>
2369
2370       <nav class="md-nav" aria-label="From WoltLab Suite 3.1" data-md-level="2">
2371         <label class="md-nav__title" for="__nav_6_5">
2372           <span class="md-nav__icon md-icon"></span>
2373           From WoltLab Suite 3.1
2374         </label>
2375         <ul class="md-nav__list" data-md-scrollfix>
2376
2377
2378
2379
2380
2381
2382     <li class="md-nav__item">
2383       <a href="../../migration/wsc31/php/" class="md-nav__link">
2384         PHP API
2385       </a>
2386     </li>
2387
2388
2389
2390
2391         </ul>
2392       </nav>
2393     </li>
2394
2395
2396
2397
2398
2399
2400
2401
2402
2403
2404     <li class="md-nav__item md-nav__item--nested">
2405
2406
2407         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_6" type="checkbox" id="__nav_6_6" >
2408
2409
2410
2411
2412         <label class="md-nav__link" for="__nav_6_6">
2413           From WoltLab Suite 3.0
2414           <span class="md-nav__icon md-icon"></span>
2415         </label>
2416
2417       <nav class="md-nav" aria-label="From WoltLab Suite 3.0" data-md-level="2">
2418         <label class="md-nav__title" for="__nav_6_6">
2419           <span class="md-nav__icon md-icon"></span>
2420           From WoltLab Suite 3.0
2421         </label>
2422         <ul class="md-nav__list" data-md-scrollfix>
2423
2424
2425
2426
2427
2428
2429     <li class="md-nav__item">
2430       <a href="../../migration/wsc30/php/" class="md-nav__link">
2431         PHP API
2432       </a>
2433     </li>
2434
2435
2436
2437
2438
2439
2440
2441
2442
2443     <li class="md-nav__item">
2444       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
2445         JavaScript API
2446       </a>
2447     </li>
2448
2449
2450
2451
2452
2453
2454
2455
2456
2457     <li class="md-nav__item">
2458       <a href="../../migration/wsc30/templates/" class="md-nav__link">
2459         Templates
2460       </a>
2461     </li>
2462
2463
2464
2465
2466
2467
2468
2469
2470
2471     <li class="md-nav__item">
2472       <a href="../../migration/wsc30/css/" class="md-nav__link">
2473         CSS
2474       </a>
2475     </li>
2476
2477
2478
2479
2480
2481
2482
2483
2484
2485     <li class="md-nav__item">
2486       <a href="../../migration/wsc30/package/" class="md-nav__link">
2487         Package Components
2488       </a>
2489     </li>
2490
2491
2492
2493
2494         </ul>
2495       </nav>
2496     </li>
2497
2498
2499
2500
2501
2502
2503
2504
2505
2506
2507     <li class="md-nav__item md-nav__item--nested">
2508
2509
2510         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_7" type="checkbox" id="__nav_6_7" >
2511
2512
2513
2514
2515         <label class="md-nav__link" for="__nav_6_7">
2516           From WCF 2.1
2517           <span class="md-nav__icon md-icon"></span>
2518         </label>
2519
2520       <nav class="md-nav" aria-label="From WCF 2.1" data-md-level="2">
2521         <label class="md-nav__title" for="__nav_6_7">
2522           <span class="md-nav__icon md-icon"></span>
2523           From WCF 2.1
2524         </label>
2525         <ul class="md-nav__list" data-md-scrollfix>
2526
2527
2528
2529
2530
2531
2532     <li class="md-nav__item">
2533       <a href="../../migration/wcf21/php/" class="md-nav__link">
2534         PHP API
2535       </a>
2536     </li>
2537
2538
2539
2540
2541
2542
2543
2544
2545
2546     <li class="md-nav__item">
2547       <a href="../../migration/wcf21/templates/" class="md-nav__link">
2548         Templates
2549       </a>
2550     </li>
2551
2552
2553
2554
2555
2556
2557
2558
2559
2560     <li class="md-nav__item">
2561       <a href="../../migration/wcf21/css/" class="md-nav__link">
2562         CSS
2563       </a>
2564     </li>
2565
2566
2567
2568
2569
2570
2571
2572
2573
2574     <li class="md-nav__item">
2575       <a href="../../migration/wcf21/package/" class="md-nav__link">
2576         Package Components
2577       </a>
2578     </li>
2579
2580
2581
2582
2583         </ul>
2584       </nav>
2585     </li>
2586
2587
2588
2589
2590         </ul>
2591       </nav>
2592     </li>
2593
2594
2595
2596
2597
2598
2599
2600
2601
2602
2603
2604     <li class="md-nav__item md-nav__item--nested">
2605
2606
2607         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
2608
2609
2610
2611
2612         <label class="md-nav__link" for="__nav_7">
2613           Tutorials
2614           <span class="md-nav__icon md-icon"></span>
2615         </label>
2616
2617       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
2618         <label class="md-nav__title" for="__nav_7">
2619           <span class="md-nav__icon md-icon"></span>
2620           Tutorials
2621         </label>
2622         <ul class="md-nav__list" data-md-scrollfix>
2623
2624
2625
2626
2627
2628
2629
2630     <li class="md-nav__item md-nav__item--nested">
2631
2632
2633         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
2634
2635
2636
2637
2638         <label class="md-nav__link" for="__nav_7_1">
2639           Tutorial Series
2640           <span class="md-nav__icon md-icon"></span>
2641         </label>
2642
2643       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
2644         <label class="md-nav__title" for="__nav_7_1">
2645           <span class="md-nav__icon md-icon"></span>
2646           Tutorial Series
2647         </label>
2648         <ul class="md-nav__list" data-md-scrollfix>
2649
2650
2651
2652
2653
2654
2655     <li class="md-nav__item">
2656       <a href="../../tutorial/series/overview/" class="md-nav__link">
2657         Overview
2658       </a>
2659     </li>
2660
2661
2662
2663
2664
2665
2666
2667
2668
2669     <li class="md-nav__item">
2670       <a href="../../tutorial/series/part_1/" class="md-nav__link">
2671         Part 1
2672       </a>
2673     </li>
2674
2675
2676
2677
2678
2679
2680
2681
2682
2683     <li class="md-nav__item">
2684       <a href="../../tutorial/series/part_2/" class="md-nav__link">
2685         Part 2
2686       </a>
2687     </li>
2688
2689
2690
2691
2692
2693
2694
2695
2696
2697     <li class="md-nav__item">
2698       <a href="../../tutorial/series/part_3/" class="md-nav__link">
2699         Part 3
2700       </a>
2701     </li>
2702
2703
2704
2705
2706
2707
2708
2709
2710
2711     <li class="md-nav__item">
2712       <a href="../../tutorial/series/part_4/" class="md-nav__link">
2713         Part 4
2714       </a>
2715     </li>
2716
2717
2718
2719
2720
2721
2722
2723
2724
2725     <li class="md-nav__item">
2726       <a href="../../tutorial/series/part_5/" class="md-nav__link">
2727         Part 5
2728       </a>
2729     </li>
2730
2731
2732
2733
2734
2735
2736
2737
2738
2739     <li class="md-nav__item">
2740       <a href="../../tutorial/series/part_6/" class="md-nav__link">
2741         Part 6
2742       </a>
2743     </li>
2744
2745
2746
2747
2748         </ul>
2749       </nav>
2750     </li>
2751
2752
2753
2754
2755         </ul>
2756       </nav>
2757     </li>
2758
2759
2760
2761   </ul>
2762 </nav>
2763                   </div>
2764                 </div>
2765               </div>
2766
2767
2768
2769               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
2770                 <div class="md-sidebar__scrollwrap">
2771                   <div class="md-sidebar__inner">
2772
2773
2774 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
2775
2776
2777
2778
2779
2780
2781     <label class="md-nav__title" for="__toc">
2782       <span class="md-nav__icon md-icon"></span>
2783       Table of contents
2784     </label>
2785     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
2786
2787         <li class="md-nav__item">
2788   <a href="#quickstart" class="md-nav__link">
2789     Quickstart
2790   </a>
2791
2792 </li>
2793
2794         <li class="md-nav__item">
2795   <a href="#dialogs-without-controls" class="md-nav__link">
2796     Dialogs Without Controls
2797   </a>
2798
2799     <nav class="md-nav" aria-label="Dialogs Without Controls">
2800       <ul class="md-nav__list">
2801
2802           <li class="md-nav__item">
2803   <a href="#when-to-use" class="md-nav__link">
2804     When to Use
2805   </a>
2806
2807 </li>
2808
2809       </ul>
2810     </nav>
2811
2812 </li>
2813
2814         <li class="md-nav__item">
2815   <a href="#alerts" class="md-nav__link">
2816     Alerts
2817   </a>
2818
2819     <nav class="md-nav" aria-label="Alerts">
2820       <ul class="md-nav__list">
2821
2822           <li class="md-nav__item">
2823   <a href="#when-to-use_1" class="md-nav__link">
2824     When to Use
2825   </a>
2826
2827 </li>
2828
2829       </ul>
2830     </nav>
2831
2832 </li>
2833
2834         <li class="md-nav__item">
2835   <a href="#confirmation" class="md-nav__link">
2836     Confirmation
2837   </a>
2838
2839 </li>
2840
2841         <li class="md-nav__item">
2842   <a href="#prompts" class="md-nav__link">
2843     Prompts
2844   </a>
2845
2846     <nav class="md-nav" aria-label="Prompts">
2847       <ul class="md-nav__list">
2848
2849           <li class="md-nav__item">
2850   <a href="#code-example" class="md-nav__link">
2851     Code Example
2852   </a>
2853
2854 </li>
2855
2856           <li class="md-nav__item">
2857   <a href="#custom-buttons" class="md-nav__link">
2858     Custom Buttons
2859   </a>
2860
2861     <nav class="md-nav" aria-label="Custom Buttons">
2862       <ul class="md-nav__list">
2863
2864           <li class="md-nav__item">
2865   <a href="#customizing-the-primary-button" class="md-nav__link">
2866     Customizing the Primary Button
2867   </a>
2868
2869 </li>
2870
2871       </ul>
2872     </nav>
2873
2874 </li>
2875
2876           <li class="md-nav__item">
2877   <a href="#adding-an-extra-button" class="md-nav__link">
2878     Adding an Extra Button
2879   </a>
2880
2881 </li>
2882
2883       </ul>
2884     </nav>
2885
2886 </li>
2887
2888         <li class="md-nav__item">
2889   <a href="#interacting-with-dialogs" class="md-nav__link">
2890     Interacting with dialogs
2891   </a>
2892
2893     <nav class="md-nav" aria-label="Interacting with dialogs">
2894       <ul class="md-nav__list">
2895
2896           <li class="md-nav__item">
2897   <a href="#opening-and-closing-dialogs" class="md-nav__link">
2898     Opening and Closing Dialogs
2899   </a>
2900
2901 </li>
2902
2903           <li class="md-nav__item">
2904   <a href="#accessing-the-content" class="md-nav__link">
2905     Accessing the Content
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="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>
3176 <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>.
3177 The new implementation requires to you to keep track of the dialog on your own.</p>
3178 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
3179 <span class="normal"> 2</span>
3180 <span class="normal"> 3</span>
3181 <span class="normal"> 4</span>
3182 <span class="normal"> 5</span>
3183 <span class="normal"> 6</span>
3184 <span class="normal"> 7</span>
3185 <span class="normal"> 8</span>
3186 <span class="normal"> 9</span>
3187 <span class="normal">10</span>
3188 <span class="normal">11</span>
3189 <span class="normal">12</span>
3190 <span class="normal">13</span>
3191 <span class="normal">14</span>
3192 <span class="normal">15</span>
3193 <span class="normal">16</span>
3194 <span class="normal">17</span>
3195 <span class="normal">18</span>
3196 <span class="normal">19</span>
3197 <span class="normal">20</span>
3198 <span class="normal">21</span>
3199 <span class="normal">22</span>
3200 <span class="normal">23</span>
3201 <span class="normal">24</span>
3202 <span class="normal">25</span>
3203 <span class="normal">26</span>
3204 <span class="normal">27</span>
3205 <span class="normal">28</span>
3206 <span class="normal">29</span>
3207 <span class="normal">30</span>
3208 <span class="normal">31</span>
3209 <span class="normal">32</span>
3210 <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>
3211 <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>
3212
3213 <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>
3214 <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>
3215 <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>
3216 <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>
3217 <span class="w">    </span><span class="p">});</span><span class="w"></span>
3218 <span class="w">  </span><span class="p">}</span><span class="w"></span>
3219
3220 <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>
3221 <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>
3222
3223 <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>
3224 <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>
3225 <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>
3226 <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>
3227 <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>
3228 <span class="w">    </span><span class="p">}</span><span class="w"></span>
3229
3230 <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>
3231 <span class="w">  </span><span class="p">}</span><span class="w"></span>
3232
3233 <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>
3234 <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>
3235 <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>
3236 <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>
3237 <span class="w">        </span><span class="p">.</span><span class="nx">withoutControls</span><span class="p">();</span><span class="w"></span>
3238 <span class="w">    </span><span class="p">}</span><span class="w"></span>
3239
3240 <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>
3241 <span class="w">  </span><span class="p">}</span><span class="w"></span>
3242 <span class="p">}</span><span class="w"></span>
3243 </code></pre></div></td></tr></table></div>
3244 <h3 id="event-access">Event Access<a class="headerlink" href="#event-access" title="Permanent link">#</a></h3>
3245 <p>You can bind event listeners to specialized events to get notified of events and to modify its behavior.</p>
3246 <h4 id="afterclose"><code>afterClose</code><a class="headerlink" href="#afterclose" title="Permanent link">#</a></h4>
3247 <p><em>This event cannot be canceled.</em></p>
3248 <p>Fires when the dialog has closed.</p>
3249 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3250 <span class="normal">2</span>
3251 <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>
3252 <span class="w">  </span><span class="c1">// Dialog was closed.</span><span class="w"></span>
3253 <span class="p">});</span><span class="w"></span>
3254 </code></pre></div></td></tr></table></div>
3255 <h4 id="close"><code>close</code><a class="headerlink" href="#close" title="Permanent link">#</a></h4>
3256 <p>Fires when the dialog is about to close.</p>
3257 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3258 <span class="normal">2</span>
3259 <span class="normal">3</span>
3260 <span class="normal">4</span>
3261 <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>
3262 <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>
3263 <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>
3264 <span class="w">  </span><span class="p">}</span><span class="w"></span>
3265 <span class="p">});</span><span class="w"></span>
3266 </code></pre></div></td></tr></table></div>
3267 <h4 id="cancel"><code>cancel</code><a class="headerlink" href="#cancel" title="Permanent link">#</a></h4>
3268 <p>Fires only when there is a “Cancel” button and the user has either pressed that button or clicked on the modal backdrop.
3269 The dialog will close if the event is not canceled.</p>
3270 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3271 <span class="normal">2</span>
3272 <span class="normal">3</span>
3273 <span class="normal">4</span>
3274 <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>
3275 <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>
3276 <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>
3277 <span class="w">  </span><span class="p">}</span><span class="w"></span>
3278 <span class="p">});</span><span class="w"></span>
3279 </code></pre></div></td></tr></table></div>
3280 <h4 id="extra"><code>extra</code><a class="headerlink" href="#extra" title="Permanent link">#</a></h4>
3281 <p><em>This event cannot be canceled.</em></p>
3282 <p>Fires when an extra button is present and the button was clicked by the user.
3283 This event does nothing on its own and is supported for dialogs of type “Prompt” only.</p>
3284 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3285 <span class="normal">2</span>
3286 <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>
3287 <span class="w">  </span><span class="c1">// The extra button was clicked.</span><span class="w"></span>
3288 <span class="p">});</span><span class="w"></span>
3289 </code></pre></div></td></tr></table></div>
3290 <h4 id="primary"><code>primary</code><a class="headerlink" href="#primary" title="Permanent link">#</a></h4>
3291 <p><em>This event cannot be canceled.</em></p>
3292 <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>
3293 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3294 <span class="normal">2</span>
3295 <span class="normal">3</span>
3296 <span class="normal">4</span>
3297 <span class="normal">5</span>
3298 <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>
3299 <span class="w">  </span><span class="c1">// The primary action button was clicked or the</span><span class="w"></span>
3300 <span class="w">  </span><span class="c1">// form was submitted through keyboard controls.</span><span class="w"></span>
3301 <span class="w">  </span><span class="c1">//</span><span class="w"></span>
3302 <span class="w">  </span><span class="c1">// The `validate` event has completed successfully.</span><span class="w"></span>
3303 <span class="p">});</span><span class="w"></span>
3304 </code></pre></div></td></tr></table></div>
3305 <h4 id="validate"><code>validate</code><a class="headerlink" href="#validate" title="Permanent link">#</a></h4>
3306 <p>Fires only when there is a form and the user has pressed the primary action button or submitted the form through keyboard controls.
3307 Canceling this event is interpreted as a form validation failure.</p>
3308 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
3309 <span class="normal"> 2</span>
3310 <span class="normal"> 3</span>
3311 <span class="normal"> 4</span>
3312 <span class="normal"> 5</span>
3313 <span class="normal"> 6</span>
3314 <span class="normal"> 7</span>
3315 <span class="normal"> 8</span>
3316 <span class="normal"> 9</span>
3317 <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>
3318 <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>
3319
3320 <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>
3321 <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>
3322 <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>
3323
3324 <span class="w">    </span><span class="c1">// Display an inline error message.</span><span class="w"></span>
3325 <span class="w">  </span><span class="p">}</span><span class="w"></span>
3326 <span class="p">});</span><span class="w"></span>
3327 </code></pre></div></td></tr></table></div>
3328
3329   <hr>
3330 <div class="md-source-file">
3331   <small>
3332
3333       Last update:
3334       2022-10-13
3335
3336   </small>
3337 </div>
3338
3339
3340
3341
3342
3343
3344               </article>
3345             </div>
3346
3347
3348         </div>
3349
3350       </main>
3351
3352         <footer class="md-footer">
3353
3354
3355     <nav class="md-footer__inner md-grid" aria-label="Footer" >
3356
3357
3358         <a href="../components_confirmation/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Confirmation" rel="prev">
3359           <div class="md-footer__button md-icon">
3360             <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>
3361           </div>
3362           <div class="md-footer__title">
3363             <div class="md-ellipsis">
3364               <span class="md-footer__direction">
3365                 Previous
3366               </span>
3367               Confirmation
3368             </div>
3369           </div>
3370         </a>
3371
3372
3373
3374         <a href="../new-api_writing-a-module/" class="md-footer__link md-footer__link--next" aria-label="Next: Writing a module" rel="next">
3375           <div class="md-footer__title">
3376             <div class="md-ellipsis">
3377               <span class="md-footer__direction">
3378                 Next
3379               </span>
3380               Writing a module
3381             </div>
3382           </div>
3383           <div class="md-footer__button md-icon">
3384             <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>
3385           </div>
3386         </a>
3387
3388     </nav>
3389
3390   <div class="md-footer-meta md-typeset">
3391     <div class="md-footer-meta__inner md-grid">
3392       <div class="md-copyright">
3393
3394     <div class="md-copyright__highlight">
3395       Copyright © 2020 WoltLab GmbH
3396     </div>
3397
3398
3399     Made with
3400     <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
3401       Material for MkDocs
3402     </a>
3403
3404 </div>
3405
3406         <div class="md-copyright">
3407         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
3408         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
3409 </div>
3410
3411     </div>
3412   </div>
3413 </footer>
3414
3415     </div>
3416     <div class="md-dialog" data-md-component="dialog">
3417       <div class="md-dialog__inner md-typeset"></div>
3418     </div>
3419
3420     <script id="__config" type="application/json">{"base": "../..", "features": ["navigation.tracking"], "search": "../../assets/javascripts/workers/search.5bf1dace.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>
3421
3422
3423       <script src="../../assets/javascripts/bundle.078830c0.min.js"></script>
3424
3425
3426   </body>
3427 </html>