6.0/javascript/components_dialog/index.html

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