5.3/javascript_new-api_dialogs.html

   1 <!DOCTYPE html>
   2 <head>
   3     <meta charset="utf-8">
   4 <meta http-equiv="X-UA-Compatible" content="IE=edge">
   5 <meta name="viewport" content="width=device-width, initial-scale=1">
   6 <meta name="description" content="">
   7 <meta name="keywords" content=" ">
   8 <title>Dialogs - JavaScript API | WoltLab Suite 5.3 Documentation</title>
   9
  10 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/syntax.css">
  11 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600">
  12 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/font-awesome.min.css">
  13 <!--<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">-->
  14 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/modern-business.css">
  15 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/lavish-bootstrap.css">
  16 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/customstyles.css">
  17 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/theme-blue.css?v=3">
  18
  19 <script src="https://docs.woltlab.com/5.3/js/jquery.min.js"></script>
  20 <script src="https://docs.woltlab.com/5.3/js/jquery.cookie.min.js"></script>
  21 <script src="https://docs.woltlab.com/5.3/js/jquery.navgoco.min.js"></script>
  22 <script src="https://docs.woltlab.com/5.3/js/bootstrap.min.js"></script>
  23 <script src="https://docs.woltlab.com/5.3/js/anchor.min.js"></script>
  24 <script src="https://docs.woltlab.com/5.3/js/toc.js"></script>
  25 <script src="https://docs.woltlab.com/5.3/js/customscripts.js"></script>
  26
  27 <link rel="shortcut icon" href="https://docs.woltlab.com/5.3/images/favicon.ico">
  28
  29 <link rel="alternate" type="application/rss+xml" title="woltlab.github.io" href="https://docs.woltlab.com/5.3feed.xml">
  30
  31     <script>
  32         $(document).ready(function() {
  33             // Initialize navgoco with default options
  34             $("#mysidebar").navgoco({
  35                 caretHtml: '',
  36                 accordion: true,
  37                 openClass: 'active', // open
  38                 save: false, // leave false or nav highlighting doesn't work right
  39                 cookie: {
  40                     name: 'navgoco',
  41                     expires: false,
  42                     path: '/'
  43                 },
  44                 slide: {
  45                     duration: 400,
  46                     easing: 'swing'
  47                 }
  48             });
  49
  50             $("#collapseAll").click(function(e) {
  51                 e.preventDefault();
  52                 $("#mysidebar").navgoco('toggle', false);
  53             });
  54
  55             $("#expandAll").click(function(e) {
  56                 e.preventDefault();
  57                 $("#mysidebar").navgoco('toggle', true);
  58             });
  59
  60         });
  61
  62     </script>
  63     <script>
  64         $(function () {
  65             $('[data-toggle="tooltip"]').tooltip()
  66         })
  67     </script>
  68
  69
  70 </head>
  71 <body>
  72   <!-- Navigation -->
  73 <nav class="navbar navbar-inverse navbar-fixed-top">
  74     <div class="container topnavlinks">
  75         <div class="navbar-header">
  76             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  77                 <span class="sr-only">Toggle navigation</span>
  78                 <span class="icon-bar"></span>
  79                 <span class="icon-bar"></span>
  80                 <span class="icon-bar"></span>
  81             </button>
  82             <a class="fa fa-home fa-lg navbar-brand" href="index.html">&nbsp;<span class="projectTitle"> WoltLab Suite 5.3 Documentation</span></a>
  83         </div>
  84         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  85             <ul class="nav navbar-nav navbar-right">
  86                 <!-- entries without drop-downs appear here -->
  87
  88
  89
  90                 <li><a href="https://www.woltlab.com" target="_blank">woltlab.com</a></li>
  91
  92
  93
  94
  95
  96                 <li><a href="https://github.com/WoltLab/WCF/" target="_blank">Code on github.com</a></li>
  97
  98
  99
 100                 <!-- entries with drop-downs appear here -->
 101                 <!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->
 102
 103
 104                 <!--comment out this block if you want to hide search-->
 105                 <li>
 106                     <!--start search-->
 107                     <div id="search-demo-container">
 108                         <input type="text" id="search-input" placeholder="search...">
 109                         <ul id="results-container"></ul>
 110                     </div>
 111                     <script src="https://docs.woltlab.com/5.3/js/jekyll-search.js" type="text/javascript"></script>
 112                     <script type="text/javascript">
 113                             SimpleJekyllSearch.init({
 114                                 searchInput: document.getElementById('search-input'),
 115                                 resultsContainer: document.getElementById('results-container'),
 116                                 dataSource: 'https://docs.woltlab.com/5.3/search.json',
 117                                 searchResultTemplate: '<li><a href="{url}" title="Dialogs - JavaScript API">{title}</a></li>',
 118                     noResultsText: 'No results found.',
 119                             limit: 10,
 120                             fuzzy: true,
 121                     })
 122                     </script>
 123                     <!--end search-->
 124                 </li>
 125             </ul>
 126         </div>
 127         </div>
 128         <!-- /.container -->
 129 </nav>
 130
 131
 132   <div class="container">
 133     <div class="col-lg-12">&nbsp;</div>
 134
 135     <div class="row">
 136       <div class="col-md-3">
 137
 138
 139
 140 <ul id="mysidebar" class="nav">
 141     <li class="sidebarTitle">WoltLab Suite 5.3</li>
 142
 143
 144
 145             <li>
 146                 <a href="#">Getting Started</a>
 147                 <ul>
 148
 149
 150
 151
 152                                 <li data-identifier="index"><a href="index.html">Introduction</a></li>
 153
 154
 155
 156
 157
 158
 159
 160
 161                                 <li data-identifier="getting-started_quick-start"><a href="getting-started_quick-start.html">Quick Start</a></li>
 162
 163
 164
 165
 166
 167                 </ul>
 168             </li>
 169
 170             <li>
 171                 <a href="#">PHP API</a>
 172                 <ul>
 173
 174
 175
 176
 177                                 <li data-identifier="php_pages"><a href="php_pages.html">Pages</a></li>
 178
 179
 180
 181
 182
 183
 184
 185
 186                                 <li data-identifier="php_database-objects"><a href="php_database-objects.html">Database Objects</a></li>
 187
 188
 189
 190
 191
 192
 193
 194
 195                                 <li data-identifier="php_database-access"><a href="php_database-access.html">Database Access</a></li>
 196
 197
 198
 199
 200
 201
 202
 203
 204                                 <li data-identifier="php_exceptions"><a href="php_exceptions.html">Exceptions</a></li>
 205
 206
 207
 208
 209
 210
 211
 212
 213                             <li class="subfolders">
 214                                 <a href="#">API</a>
 215                                 <ul>
 216
 217
 218
 219                                             <li data-identifier="php_api_caches"><a href="php_api_caches.html">Caches</a></li>
 220
 221
 222
 223
 224                                             <li data-identifier="php_api_comments"><a href="php_api_comments.html">Comments</a></li>
 225
 226
 227
 228
 229                                             <li data-identifier="php_api_cronjobs"><a href="php_api_cronjobs.html">Cronjobs</a></li>
 230
 231
 232
 233
 234                                             <li data-identifier="php_api_events"><a href="php_api_events.html">Events</a></li>
 235
 236
 237
 238
 239                                             <li data-identifier="php_api_form_builder"><a href="php_api_form_builder.html">Form Builder</a></li>
 240
 241
 242
 243
 244                                             <li data-identifier="php_api_package_installation_plugins"><a href="php_api_package_installation_plugins.html">Package Installation Plugins</a></li>
 245
 246
 247
 248
 249                                             <li data-identifier="php_api_user_activity_points"><a href="php_api_user_activity_points.html">User Activity Points</a></li>
 250
 251
 252
 253
 254                                             <li data-identifier="php_api_user_notifications"><a href="php_api_user_notifications.html">User Notifications</a></li>
 255
 256
 257
 258
 259                                             <li data-identifier="php_api_sitemaps"><a href="php_api_sitemaps.html">Sitemaps</a></li>
 260
 261
 262                                 </ul>
 263                             </li>
 264
 265
 266
 267
 268
 269                                 <li data-identifier="php_code-style"><a href="php_code-style.html">Code Style</a></li>
 270
 271
 272
 273
 274
 275
 276
 277
 278                                 <li data-identifier="php_apps"><a href="php_apps.html">Apps</a></li>
 279
 280
 281
 282
 283
 284
 285
 286
 287                                 <li data-identifier="php_gdpr"><a href="php_gdpr.html">GDPR</a></li>
 288
 289
 290
 291
 292
 293                 </ul>
 294             </li>
 295
 296             <li>
 297                 <a href="#">Languages, Templates & CSS</a>
 298                 <ul>
 299
 300
 301
 302
 303                                 <li data-identifier="view_languages"><a href="view_languages.html">Languages</a></li>
 304
 305
 306
 307
 308
 309
 310
 311
 312                                 <li data-identifier="view_templates"><a href="view_templates.html">Templates</a></li>
 313
 314
 315
 316
 317
 318
 319
 320
 321                                 <li data-identifier="view_css"><a href="view_css.html">CSS</a></li>
 322
 323
 324
 325
 326
 327                 </ul>
 328             </li>
 329
 330             <li>
 331                 <a href="#">JavaScript API</a>
 332                 <ul>
 333
 334
 335
 336
 337                                 <li data-identifier="javascript_general-usage"><a href="javascript_general-usage.html">General Usage</a></li>
 338
 339
 340
 341
 342
 343
 344
 345
 346                             <li class="subfolders">
 347                                 <a href="#">New API</a>
 348                                 <ul>
 349
 350
 351
 352                                             <li data-identifier="javascript_new-api_writing-a-module"><a href="javascript_new-api_writing-a-module.html">Writing a module</a></li>
 353
 354
 355
 356
 357                                             <li data-identifier="javascript_new-api_data-structures"><a href="javascript_new-api_data-structures.html">Data Structures</a></li>
 358
 359
 360
 361
 362                                             <li data-identifier="javascript_new-api_core"><a href="javascript_new-api_core.html">Core Functions</a></li>
 363
 364
 365
 366
 367                                             <li data-identifier="javascript_new-api_dom"><a href="javascript_new-api_dom.html">DOM</a></li>
 368
 369
 370
 371
 372                                             <li data-identifier="javascript_new-api_events"><a href="javascript_new-api_events.html">Event Handling</a></li>
 373
 374
 375
 376
 377                                             <li data-identifier="javascript_new-api_ajax"><a href="javascript_new-api_ajax.html">Ajax</a></li>
 378
 379
 380
 381
 382                                             <li class="active" data-identifier="javascript_new-api_dialogs"><a href="javascript_new-api_dialogs.html">Dialogs</a></li>
 383
 384
 385
 386
 387                                             <li data-identifier="javascript_new-api_browser"><a href="javascript_new-api_browser.html">Browser and Screen Sizes</a></li>
 388
 389
 390
 391
 392                                             <li data-identifier="javascript_new-api_ui"><a href="javascript_new-api_ui.html">User Interface</a></li>
 393
 394
 395                                 </ul>
 396                             </li>
 397
 398
 399
 400
 401
 402                                 <li data-identifier="javascript_legacy-api"><a href="javascript_legacy-api.html">Legacy API</a></li>
 403
 404
 405
 406
 407
 408
 409
 410
 411                                 <li data-identifier="javascript_helper-functions"><a href="javascript_helper-functions.html">Helper Functions</a></li>
 412
 413
 414
 415
 416
 417
 418
 419
 420                                 <li data-identifier="javascript_code-snippets"><a href="javascript_code-snippets.html">Code Snippets</a></li>
 421
 422
 423
 424
 425
 426                 </ul>
 427             </li>
 428
 429             <li>
 430                 <a href="#">Package Components</a>
 431                 <ul>
 432
 433
 434
 435
 436                                 <li data-identifier="package_package-xml"><a href="package_package-xml.html">package.xml</a></li>
 437
 438
 439
 440
 441
 442
 443
 444
 445                                 <li data-identifier="package_pip"><a href="package_pip.html">PIPs</a></li>
 446
 447
 448
 449
 450
 451                 </ul>
 452             </li>
 453
 454             <li>
 455                 <a href="#">Migration</a>
 456                 <ul>
 457
 458
 459
 460
 461                             <li class="subfolders">
 462                                 <a href="#">Migrating from WSC 5.2</a>
 463                                 <ul>
 464
 465
 466
 467                                             <li data-identifier="migration_wsc-52_php"><a href="migration_wsc-52_php.html">PHP API</a></li>
 468
 469
 470
 471
 472                                             <li data-identifier="migration_wsc-52_templates"><a href="migration_wsc-52_templates.html">Templates and Languages</a></li>
 473
 474
 475
 476
 477                                             <li data-identifier="migration_wsc-52_libraries"><a href="migration_wsc-52_libraries.html">Third Party Libraries</a></li>
 478
 479
 480                                 </ul>
 481                             </li>
 482
 483                             <li class="subfolders">
 484                                 <a href="#">Migrating from WSC 3.1</a>
 485                                 <ul>
 486
 487
 488
 489                                             <li data-identifier="migration_wsc-31_php"><a href="migration_wsc-31_php.html">PHP API</a></li>
 490
 491
 492                                 </ul>
 493                             </li>
 494
 495                             <li class="subfolders">
 496                                 <a href="#">Migrating from WSC 3.0</a>
 497                                 <ul>
 498
 499
 500
 501                                             <li data-identifier="migration_wsc-30_php"><a href="migration_wsc-30_php.html">PHP API</a></li>
 502
 503
 504
 505
 506                                             <li data-identifier="migration_wsc-30_javascript"><a href="migration_wsc-30_javascript.html">JavaScript API</a></li>
 507
 508
 509
 510
 511                                             <li data-identifier="migration_wsc-30_templates"><a href="migration_wsc-30_templates.html">Templates</a></li>
 512
 513
 514
 515
 516                                             <li data-identifier="migration_wsc-30_css"><a href="migration_wsc-30_css.html">CSS</a></li>
 517
 518
 519
 520
 521                                             <li data-identifier="migration_wsc-30_package"><a href="migration_wsc-30_package.html">Package Components</a></li>
 522
 523
 524                                 </ul>
 525                             </li>
 526
 527                             <li class="subfolders">
 528                                 <a href="#">Migrating from WCF 2.1</a>
 529                                 <ul>
 530
 531
 532
 533                                             <li data-identifier="migration_wcf-21_php"><a href="migration_wcf-21_php.html">PHP API</a></li>
 534
 535
 536
 537
 538                                             <li data-identifier="migration_wcf-21_templates"><a href="migration_wcf-21_templates.html">Templates</a></li>
 539
 540
 541
 542
 543                                             <li data-identifier="migration_wcf-21_css"><a href="migration_wcf-21_css.html">CSS</a></li>
 544
 545
 546
 547
 548                                             <li data-identifier="migration_wcf-21_package"><a href="migration_wcf-21_package.html">Package Components</a></li>
 549
 550
 551                                 </ul>
 552                             </li>
 553
 554
 555                 </ul>
 556             </li>
 557
 558             <li>
 559                 <a href="#">Tutorials</a>
 560                 <ul>
 561
 562
 563
 564
 565                                 <li data-identifier="tutorial_tutorial-series"><a href="tutorial_tutorial-series.html">Tutorial Series</a></li>
 566
 567
 568
 569
 570
 571                 </ul>
 572             </li>
 573
 574
 575 </ul>
 576
 577 <script>
 578 (function() {
 579     var sidebar = $('#mysidebar');
 580     var item = sidebar.find('.active');
 581     if (item.length === 0) {
 582         var parent = '';
 583         if (parent) {
 584             sidebar.find('li[data-identifier="' + parent + '"]').addClass('active');
 585         }
 586     }
 587
 588     sidebar.find(".active").parents('li').toggleClass("active");
 589 })();
 590 </script>
 591
 592       </div>
 593
 594       <div class="col-md-9">
 595         <div class="post-header">
 596    <h1 class="post-title-main">Dialogs - JavaScript API</h1>
 597 </div>
 598
 599
 600
 601 <div class="post-content">
 602
 603
 604
 605
 606
 607 <!-- this handles the automatic toc. use ## for subheads to auto-generate the on-page minitoc. if you use html tags, you must supply an ID for the heading element in order for it to appear in the minitoc. -->
 608 <script>
 609 $( document ).ready(function() {
 610   // Handler for .ready() called.
 611
 612 $('#toc').toc({ minimumHeaders: 0, listType: 'ul', showSpeed: 0, headers: 'h2,h3,h4' });
 613
 614 /* this offset helps account for the space taken up by the floating toolbar. */
 615 $('#toc').on('click', 'a', function() {
 616   var target = $(this.getAttribute('href'))
 617     , scroll_target = target.offset().top
 618
 619   $(window).scrollTop(scroll_target - 10);
 620   return false
 621 })
 622
 623 });
 624 </script>
 625
 626 <div id="toc"></div>
 627
 628
 629
 630   <h2 id="introduction">Introduction</h2>
 631
 632 <p>Dialogs are full screen overlays that cover the currently visible window area
 633 using a semi-opague backdrop and a prominently placed dialog window in the
 634 foreground. They shift the attention away from the original content towards the
 635 dialog and usually contain additional details and/or dedicated form inputs.</p>
 636
 637 <h2 id="_dialogsetup"><code class="language-plaintext highlighter-rouge">_dialogSetup()</code></h2>
 638
 639 <p>The lazy initialization is performed upon the first invocation from the callee,
 640 using the magic <code class="language-plaintext highlighter-rouge">_dialogSetup()</code> method to retrieve the basic configuration for
 641 the dialog construction and any event callbacks.</p>
 642
 643 <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// App/Foo.js</span>
 644 <span class="nx">define</span><span class="p">([</span><span class="dl">"</span><span class="s2">Ui/Dialog</span><span class="dl">"</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">UiDialog</span><span class="p">)</span> <span class="p">{</span>
 645   <span class="dl">"</span><span class="s2">use strict</span><span class="dl">"</span><span class="p">;</span>
 646
 647   <span class="kd">function</span> <span class="nx">Foo</span><span class="p">()</span> <span class="p">{};</span>
 648   <span class="nx">Foo</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span>
 649     <span class="na">bar</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
 650       <span class="c1">// this will open the dialog constructed by _dialogSetup</span>
 651       <span class="nx">UiDialog</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
 652     <span class="p">},</span>
 653
 654     <span class="na">_dialogSetup</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
 655       <span class="k">return</span> <span class="p">{</span>
 656         <span class="na">id</span><span class="p">:</span> <span class="dl">"</span><span class="s2">myDialog</span><span class="dl">"</span><span class="p">,</span>
 657         <span class="na">source</span><span class="p">:</span> <span class="dl">"</span><span class="s2">&lt;p&gt;Hello World!&lt;/p&gt;</span><span class="dl">"</span><span class="p">,</span>
 658         <span class="na">options</span><span class="p">:</span> <span class="p">{</span>
 659           <span class="na">onClose</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
 660             <span class="c1">// the fancy dialog was closed!</span>
 661           <span class="p">}</span>
 662         <span class="p">}</span>
 663       <span class="p">}</span>
 664     <span class="p">}</span>
 665   <span class="p">};</span>
 666
 667   <span class="k">return</span> <span class="nx">Foo</span><span class="p">;</span>
 668 <span class="p">});</span>
 669 </code></pre></div></div>
 670
 671 <h3 id="id-string"><code class="language-plaintext highlighter-rouge">id: string</code></h3>
 672
 673 <p>The <code class="language-plaintext highlighter-rouge">id</code> is used to identify a dialog on runtime, but is also part of the first-
 674 time setup when the dialog has not been opened before. If <code class="language-plaintext highlighter-rouge">source</code> is <code class="language-plaintext highlighter-rouge">undefined</code>,
 675 the module attempts to construct the dialog using an element with the same id.</p>
 676
 677 <h3 id="source-any"><code class="language-plaintext highlighter-rouge">source: any</code></h3>
 678
 679 <p>There are six different types of value that <code class="language-plaintext highlighter-rouge">source</code> does allow and each of them
 680 changes how the initial dialog is constructed:</p>
 681
 682 <ol>
 683   <li><code class="language-plaintext highlighter-rouge">undefined</code><br />
 684   The dialog exists already and the value of <code class="language-plaintext highlighter-rouge">id</code> should be used to identify the
 685   element.</li>
 686   <li><code class="language-plaintext highlighter-rouge">null</code><br />
 687   The HTML is provided using the second argument of <code class="language-plaintext highlighter-rouge">.open()</code>.</li>
 688   <li><code class="language-plaintext highlighter-rouge">() =&gt; void</code><br />
 689   If the <code class="language-plaintext highlighter-rouge">source</code> is a function, it is executed and is expected to start the
 690   dialog initialization itself.</li>
 691   <li><code class="language-plaintext highlighter-rouge">Object</code><br />
 692   Plain objects are interpreted as parameters for an Ajax request, in particular
 693   <code class="language-plaintext highlighter-rouge">source.data</code> will be used to issue the request. It is possible to specify the
 694   key <code class="language-plaintext highlighter-rouge">source.after</code> as a callback <code class="language-plaintext highlighter-rouge">(content: Element, responseData: Object) =&gt; void</code>
 695   that is executed after the dialog was opened.</li>
 696   <li><code class="language-plaintext highlighter-rouge">string</code><br />
 697   The string is expected to be plain HTML that should be used to construct the
 698   dialog.</li>
 699   <li><code class="language-plaintext highlighter-rouge">DocumentFragment</code><br />
 700   A new container <code class="language-plaintext highlighter-rouge">&lt;div&gt;</code> with the provided <code class="language-plaintext highlighter-rouge">id</code> is created and the contents of
 701   the <code class="language-plaintext highlighter-rouge">DocumentFragment</code> is appended to it. This container is then used for the
 702   dialog.</li>
 703 </ol>
 704
 705 <h3 id="options-object"><code class="language-plaintext highlighter-rouge">options: Object</code></h3>
 706
 707 <p>All configuration options and callbacks are handled through this object.</p>
 708
 709 <h4 id="optionsbackdropcloseonclick-boolean"><code class="language-plaintext highlighter-rouge">options.backdropCloseOnClick: boolean</code></h4>
 710
 711 <p><em>Defaults to <code class="language-plaintext highlighter-rouge">true</code>.</em></p>
 712
 713 <p>Clicks on the dialog backdrop will close the top-most dialog. This option will
 714 be force-disabled if the option <code class="language-plaintext highlighter-rouge">closeable</code> is set to <code class="language-plaintext highlighter-rouge">false</code>.</p>
 715
 716 <h4 id="optionsclosable-boolean"><code class="language-plaintext highlighter-rouge">options.closable: boolean</code></h4>
 717
 718 <p><em>Defaults to <code class="language-plaintext highlighter-rouge">true</code>.</em></p>
 719
 720 <p>Enables the close button in the dialog title, when disabled the dialog can be
 721 closed through the <code class="language-plaintext highlighter-rouge">.close()</code> API call only.</p>
 722
 723 <h4 id="optionsclosebuttonlabel-string"><code class="language-plaintext highlighter-rouge">options.closeButtonLabel: string</code></h4>
 724
 725 <p><em>Defaults to <code class="language-plaintext highlighter-rouge">Language.get("wcf.global.button.close")</code>.</em></p>
 726
 727 <p>The phrase that is displayed in the tooltip for the close button.</p>
 728
 729 <h4 id="optionscloseconfirmmessage-string"><code class="language-plaintext highlighter-rouge">options.closeConfirmMessage: string</code></h4>
 730
 731 <p><em>Defaults to <code class="language-plaintext highlighter-rouge">""</code>.</em></p>
 732
 733 <p>Shows a <a href="javascript_new-api_ui.html">confirmation dialog</a> using the configured message
 734 before closing the dialog. The dialog will not be closed if the dialog is
 735 rejected by the user.</p>
 736
 737 <h4 id="optionstitle-string"><code class="language-plaintext highlighter-rouge">options.title: string</code></h4>
 738
 739 <p><em>Defaults to <code class="language-plaintext highlighter-rouge">""</code>.</em></p>
 740
 741 <p>The phrase that is displayed in the dialog title.</p>
 742
 743 <h4 id="optionsonbeforeclose-id-string--void"><code class="language-plaintext highlighter-rouge">options.onBeforeClose: (id: string) =&gt; void</code></h4>
 744
 745 <p><em>Defaults to <code class="language-plaintext highlighter-rouge">null</code>.</em></p>
 746
 747 <p>The callback is executed when the user clicks on the close button or, if enabled,
 748 on the backdrop. The callback is responsible to close the dialog by itself, the
 749 default close behavior is automatically prevented.</p>
 750
 751 <h4 id="optionsonclose-id-string--void"><code class="language-plaintext highlighter-rouge">options.onClose: (id: string) =&gt; void</code></h4>
 752
 753 <p><em>Defaults to <code class="language-plaintext highlighter-rouge">null</code>.</em></p>
 754
 755 <p>The callback is notified once the dialog is about to be closed, but is still
 756 visible at this point. It is not possible to abort the close operation at this
 757 point.</p>
 758
 759 <h4 id="optionsonshow-content-element--void"><code class="language-plaintext highlighter-rouge">options.onShow: (content: Element) =&gt; void</code></h4>
 760
 761 <p><em>Defaults to <code class="language-plaintext highlighter-rouge">null</code>.</em></p>
 762
 763 <p>Receives the dialog content element as its only argument, allowing the callback
 764 to modify the DOM or to register event listeners before the dialog is presented
 765 to the user. The dialog is already visible at call time, but the dialog has not
 766 been finalized yet.</p>
 767
 768 <h2 id="settitleid-string--object-title-string"><code class="language-plaintext highlighter-rouge">setTitle(id: string | Object, title: string)</code></h2>
 769
 770 <p>Sets the title of a dialog.</p>
 771
 772 <h2 id="setcallbackid-string--object-key-string-value-data-any--void--null"><code class="language-plaintext highlighter-rouge">setCallback(id: string | Object, key: string, value: (data: any) =&gt; void | null)</code></h2>
 773
 774 <p>Sets a callback function after the dialog initialization, the special value
 775 <code class="language-plaintext highlighter-rouge">null</code> will remove a previously set callback. Valid values for <code class="language-plaintext highlighter-rouge">key</code> are
 776 <code class="language-plaintext highlighter-rouge">onBeforeClose</code>, <code class="language-plaintext highlighter-rouge">onClose</code> and <code class="language-plaintext highlighter-rouge">onShow</code>.</p>
 777
 778 <h2 id="rebuildid-string--object"><code class="language-plaintext highlighter-rouge">rebuild(id: string | Object)</code></h2>
 779
 780 <p>Rebuilds a dialog by performing various calculations on the maximum dialog
 781 height in regards to the overflow handling and adjustments for embedded forms.
 782 This method is automatically invoked whenever a dialog is shown, after invoking
 783 the <code class="language-plaintext highlighter-rouge">options.onShow</code> callback.</p>
 784
 785 <h2 id="closeid-string--object"><code class="language-plaintext highlighter-rouge">close(id: string | Object)</code></h2>
 786
 787 <p>Closes an open dialog, this will neither trigger a confirmation dialog, nor does
 788 it invoke the <code class="language-plaintext highlighter-rouge">options.onBeforeClose</code> callback. The <code class="language-plaintext highlighter-rouge">options.onClose</code> callback
 789 will always be invoked, but it cannot abort the close operation.</p>
 790
 791 <h2 id="getdialogid-string--object-object"><code class="language-plaintext highlighter-rouge">getDialog(id: string | Object): Object</code></h2>
 792
 793 <div class="bs-callout bs-callout-warning">This method returns an internal data object by reference, any modifications made do have an effect on the dialogs behavior and in particular no validation is performed on the modification. It is strongly recommended to use the <code class="language-plaintext highlighter-rouge">.set*()</code> methods only.</div>
 794
 795 <p>Returns the internal dialog data that is attached to a dialog. The most important
 796 key is <code class="language-plaintext highlighter-rouge">.content</code> which holds a reference to the dialog’s inner content element.</p>
 797
 798 <h2 id="isopenid-string--object-boolean"><code class="language-plaintext highlighter-rouge">isOpen(id: string | Object): boolean</code></h2>
 799
 800 <p>Returns true if the dialog exists and is open.</p>
 801
 802
 803
 804     <div class="tags">
 805
 806     </div>
 807
 808
 809
 810 </div>
 811
 812       </div>
 813     </div>
 814   </div>
 815
 816   <div class="footerBox">
 817     <div class="container">
 818       <div class="footerBoxLeft">
 819
 820         <a target="_blank" href="https://github.com/woltlab/woltlab.github.io/blob/master/pages/javascript/javascript_new-api_dialogs.md" class="btn btn-default githubEditButton no_icon" role="button"><i class="fa fa-github fa-lg"></i> Edit on GitHub</a>
 821         <p>Site last generated: Mar 5, 2021</p>
 822       </div>
 823       <div class="footerBoxRight">
 824         <a class="no_icon" href="https://www.woltlab.com"><img src="https://docs.woltlab.com/5.3/images/woltlab-black.png" srcset="https://docs.woltlab.com/5.3/images/woltlab-black@2x.png 2x" height="40" width="204" alt=""></a>
 825       </div>
 826     </div>
 827   </div>
 828
 829   <div class="pageFooter">
 830     <div class="container">
 831       &copy; 2001 ‐ 2021 <a class="no_icon" href="https://www.woltlab.com">WoltLab GmbH</a>. All rights reserved. | <a class="no_icon" href="https://www.woltlab.com/legal-notice/">Legal Notice</a> | <a class="no_icon" href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
 832     </div>
 833   </div>
 834 </body>
 835
 836 </html>