https://www.codeproject.com/articles/263531/jquery-message-box-plugin
https://dotctor.github.io/jQuery.msgBox/
https://www.c-sharpcorner.com/UploadFile/bc1c71/display-message-box-in-center-of-window-using-jquery/
https://www.queness.com/post/1696/create-a-beautiful-looking-custom-dialog-box-with-jquery-and-css3
https://www.queness.com/resources/html/project/index.html
https://gasparesganga.com/labs/jquery-message-box/
https://github.com/gasparesganga/jquery-message-box
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery MessageBox - Gaspare Sganga</title>
<link rel="stylesheet" href="dist/messagebox.min.css">
</head>
<body>
<h2 id="examples">Examples</h2>
<h3 id="example-1---substitute-for-alert-confirm-prompt">Example 1 - Substitute for Alert(), Confirm(), Prompt()</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Alert</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">(</span><span class="dl">"</span><span class="s2">A plain MessageBox can replace Javascript's window.alert(), and it looks definitely better...</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// Confirm</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">buttonDone</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Yes</span><span class="dl">"</span><span class="p">,</span>
<span class="na">buttonFail</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">No</span><span class="dl">"</span><span class="p">,</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">This looks better than a window.confirm(), don't you agree?</span><span class="dl">"</span>
<span class="p">}).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">(</span><span class="dl">"</span><span class="s2">Me too!</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}).</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">(</span><span class="dl">"</span><span class="s2">Yeah, sure... you IE6 nostalgic!</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Prompt</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">input</span> <span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">What's your name?</span><span class="dl">"</span>
<span class="p">}).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">trim</span><span class="p">(</span><span class="nx">data</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">(</span><span class="dl">"</span><span class="s2">Hi <b></span><span class="dl">"</span><span class="o">+</span><span class="nx">data</span><span class="o">+</span><span class="dl">"</span><span class="s2"></b>!</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">(</span><span class="dl">"</span><span class="s2">You are a mysterious one...</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
</code></pre></div></div>
<div>
<button id="example1_alert">Alert</button>
<button id="example1_confirm">Confirm</button>
<button id="example1_prompt">Prompt</button>
</div>
<h3 id="example-2---build-a-wrapper-function-for-common-cases">Example 2 - Build a wrapper function for common cases</h3>
<p>If you feel <em>very</em> lazy or often need the same option configuration, you can use some <em>wrapper functions</em>:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Wrapper functions</span>
<span class="kd">function</span> <span class="nx">MessageBoxConfirm</span><span class="p">(</span><span class="nx">message</span><span class="p">){</span>
<span class="k">return</span> <span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">buttonDone</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Yes</span><span class="dl">"</span><span class="p">,</span>
<span class="na">buttonFail</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">No</span><span class="dl">"</span><span class="p">,</span>
<span class="na">message</span> <span class="p">:</span> <span class="nx">message</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">MessageBoxPrompt</span><span class="p">(</span><span class="nx">message</span><span class="p">){</span>
<span class="k">return</span> <span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">input</span> <span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="na">message</span> <span class="p">:</span> <span class="nx">message</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="c1">// Concise Confirm</span>
<span class="nx">MessageBoxConfirm</span><span class="p">(</span><span class="dl">"</span><span class="s2">Is this simple enough?</span><span class="dl">"</span><span class="p">).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
<span class="c1">// Do something in response to YES</span>
<span class="p">}).</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
<span class="c1">// Do something in response to NO</span>
<span class="p">});</span>
<span class="c1">// Concise Prompt</span>
<span class="nx">MessageBoxPrompt</span><span class="p">(</span><span class="dl">"</span><span class="s2">Give me some data:</span><span class="dl">"</span><span class="p">).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
<span class="c1">// Do something with this data</span>
<span class="p">});</span>
</code></pre></div></div>
<div>
<button id="example2_confirm">Confirm</button>
<button id="example2_prompt">Prompt</button>
</div>
<h3 id="example-3---to-queue-or-not-to-queue">Example 3 - To <em>queue</em> or not to <em>queue</em>?</h3>
<p>The <a href="#queue"><code class="language-plaintext highlighter-rouge">queue</code></a> option controls whether the MessageBox has to be placed in the <em>queue</em> after the other MessageBoxes already created, or it must take precedence and be shown <strong>immediately</strong> and <strong>on top</strong>.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Just a regular MessageBox, all options to default</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">(</span><span class="dl">"</span><span class="s2">First</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// The same as the first one, it goes to the queue after it</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">(</span><span class="dl">"</span><span class="s2">Second</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// Now the interesting one: setting queue to false will show this MessageBox immediately on top of the others</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Third</span><span class="dl">"</span><span class="p">,</span>
<span class="na">queue</span> <span class="p">:</span> <span class="kc">false</span>
<span class="p">});</span>
</code></pre></div></div>
<div>
<button id="example3">Show Messages</button>
</div>
<h3 id="example-4---buttons-capabilities">Example 4 - Buttons capabilities</h3>
<p>Try all the different buttons modes. The executed handler and selected button will be logged in the box below.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Simple buttons: pass a string to buttonDone and buttonFail</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">buttonDone</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">OK</span><span class="dl">"</span><span class="p">,</span>
<span class="na">buttonFail</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Cancel</span><span class="dl">"</span><span class="p">,</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Some message...</span><span class="dl">"</span>
<span class="p">}).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">button</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Handler: .done()</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Button: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">button</span><span class="p">);</span>
<span class="p">}).</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">button</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Handler: .fail()</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Button: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">button</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Custom buttons: use a configuration object</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">buttonDone</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">one</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">text</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">1 - Nice</span><span class="dl">"</span><span class="p">,</span>
<span class="na">keyCode</span> <span class="p">:</span> <span class="p">[</span><span class="mi">49</span><span class="p">,</span> <span class="mi">97</span><span class="p">]</span>
<span class="p">},</span>
<span class="na">two</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">text</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">2 - Super</span><span class="dl">"</span><span class="p">,</span>
<span class="na">keyCode</span> <span class="p">:</span> <span class="p">[</span><span class="mi">50</span><span class="p">,</span> <span class="mi">98</span><span class="p">]</span>
<span class="p">},</span>
<span class="na">three</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">text</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">3 - Great</span><span class="dl">"</span><span class="p">,</span>
<span class="na">keyCode</span> <span class="p">:</span> <span class="p">[</span><span class="mi">51</span><span class="p">,</span> <span class="mi">99</span><span class="p">]</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="na">buttonFail</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">zero</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">text</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">0 - Meh</span><span class="dl">"</span><span class="p">,</span>
<span class="na">keyCode</span> <span class="p">:</span> <span class="p">[</span><span class="mi">48</span><span class="p">,</span> <span class="mi">96</span><span class="p">]</span>
<span class="p">},</span>
<span class="p">},</span>
<span class="na">buttonsOrder</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">fail done</span><span class="dl">"</span><span class="p">,</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">How do you like it?<br>Click a button or press keys 0 to 3 on your keyboard:</span><span class="dl">"</span>
<span class="p">}).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">button</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Handler: .done()</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Button: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">button</span><span class="p">);</span>
<span class="p">}).</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">button</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Handler: .fail()</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Button: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">button</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Shorthand: define only the buttons name and text</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">buttonDone</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">yes</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Yes</span><span class="dl">"</span><span class="p">,</span>
<span class="na">maybe</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Maybe</span><span class="dl">"</span>
<span class="p">},</span>
<span class="na">buttonFail</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">no</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">No</span><span class="dl">"</span>
<span class="p">},</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Will you marry me?</span><span class="dl">"</span>
<span class="p">}).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">button</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Handler: .done()</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Button: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">button</span><span class="p">);</span>
<span class="p">}).</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">button</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Handler: .fail()</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Button: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">button</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div></div>
<div>
<button id="example4_simple">Simple</button>
<button id="example4_object">Object</button>
<button id="example4_shorthand">Shorthand</button>
<div><pre id="example4_log" class="log"></pre></div>
</div>
<h3 id="example-5---inputs-capabilities">Example 5 - Inputs capabilities</h3>
<p>Here is a demonstration of the input capabilities. Return values will appear in the box below.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Simple textbox</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">input</span> <span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Input some string:</span><span class="dl">"</span>
<span class="p">}).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Simple textbox with default value</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">input</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Some default value</span><span class="dl">"</span><span class="p">,</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Input some string (again):</span><span class="dl">"</span>
<span class="p">}).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Multiple textboxes with default values</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">input</span> <span class="p">:</span> <span class="p">[</span><span class="dl">"</span><span class="s2">Default value 1</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">Default value 2</span><span class="dl">"</span><span class="p">,</span> <span class="dl">""</span><span class="p">],</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Now let's try with three simple textbox.<br>For the first two a default value is provided:</span><span class="dl">"</span>
<span class="p">}).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Multiple inputs of different types</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2"><b>Here is a complex form with different input types!</b></span><span class="dl">"</span><span class="p">,</span>
<span class="na">input</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">text1</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">type</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
<span class="na">label</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Some text:</span><span class="dl">"</span><span class="p">,</span>
<span class="na">title</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Input some text</span><span class="dl">"</span>
<span class="p">},</span>
<span class="na">text2</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">type</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
<span class="na">label</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Some text (max 10 characters):</span><span class="dl">"</span><span class="p">,</span>
<span class="na">title</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Input some other text</span><span class="dl">"</span><span class="p">,</span>
<span class="na">defaultValue</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Hi!</span><span class="dl">"</span><span class="p">,</span>
<span class="na">maxlength</span> <span class="p">:</span> <span class="mi">10</span>
<span class="p">},</span>
<span class="na">password1</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">type</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">password</span><span class="dl">"</span><span class="p">,</span>
<span class="na">label</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Secret password:</span><span class="dl">"</span><span class="p">,</span>
<span class="na">title</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Type password here</span><span class="dl">"</span>
<span class="p">},</span>
<span class="na">checkbox1</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">type</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">checkbox</span><span class="dl">"</span><span class="p">,</span>
<span class="na">label</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">A good ol' checkbox:</span><span class="dl">"</span><span class="p">,</span>
<span class="na">title</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Check or uncheck this, no big deal</span><span class="dl">"</span>
<span class="p">},</span>
<span class="na">dummy_caption</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">type</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">caption</span><span class="dl">"</span><span class="p">,</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">This is a <b>caption</b>, sometimes you might need one</span><span class="dl">"</span>
<span class="p">},</span>
<span class="na">select1</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">type</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">select</span><span class="dl">"</span><span class="p">,</span>
<span class="na">label</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Select with values same as displayed texts:</span><span class="dl">"</span><span class="p">,</span>
<span class="na">title</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Select a letter</span><span class="dl">"</span><span class="p">,</span>
<span class="na">options</span> <span class="p">:</span> <span class="p">[</span><span class="dl">"</span><span class="s2">A</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">B</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">C</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">D</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">E</span><span class="dl">"</span><span class="p">]</span>
<span class="p">},</span>
<span class="na">select2</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">type</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">select</span><span class="dl">"</span><span class="p">,</span>
<span class="na">label</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Select with values and texts specified and a default choice selected:</span><span class="dl">"</span><span class="p">,</span>
<span class="na">title</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Select S</span><span class="dl">"</span><span class="p">,</span>
<span class="na">options</span> <span class="p">:</span> <span class="p">{</span>
<span class="dl">"</span><span class="s2">A</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Letter A</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">B</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Letter B</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">C</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Letter C</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">D</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Letter D</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">E</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Letter E</span><span class="dl">"</span>
<span class="p">},</span>
<span class="na">defaultValue</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">C</span><span class="dl">"</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="na">top</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">auto</span><span class="dl">"</span>
<span class="p">}).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Custom DOM/jQuery Element</span>
<span class="kd">var</span> <span class="nx">select</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2"><select></span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span>
<span class="na">css</span> <span class="p">:</span> <span class="p">{</span>
<span class="dl">"</span><span class="s2">width</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">100%</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">margin-top</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">1rem</span><span class="dl">"</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">select</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="dl">"</span><span class="s2"><option>Option One</option></span><span class="dl">"</span><span class="p">);</span>
<span class="nx">select</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="dl">"</span><span class="s2"><option>Option Two</option></span><span class="dl">"</span><span class="p">);</span>
<span class="nx">select</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="dl">"</span><span class="s2"><option>Option Three</option></span><span class="dl">"</span><span class="p">);</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Choose an Option:</span><span class="dl">"</span><span class="p">,</span>
<span class="na">input</span> <span class="p">:</span> <span class="nx">select</span>
<span class="p">}).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div></div>
<div>
<button id="example5_simple">Simple</button>
<button id="example5_default">Default Value</button>
<button id="example5_array">Array</button>
<button id="example5_object">Object</button>
<button id="example5_element">DOM/jQuery Element</button>
<div><pre id="example5_log" class="log"></pre></div>
</div>
<h3 id="example-6---filters-and-validation">Example 6 - Filters and validation</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Simple</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">buttonDone</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">OK</span><span class="dl">"</span><span class="p">,</span>
<span class="na">buttonFail</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Cancel</span><span class="dl">"</span><span class="p">,</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">You won't be able to continue unless you enter some string here:</span><span class="dl">"</span><span class="p">,</span>
<span class="na">input</span> <span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="na">filterDone</span> <span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">data</span> <span class="o">===</span> <span class="dl">""</span><span class="p">)</span> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// Error</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">buttonDone</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">OK</span><span class="dl">"</span><span class="p">,</span>
<span class="na">buttonFail</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Cancel</span><span class="dl">"</span><span class="p">,</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">If you don't compile both fields an error message will pop up:</span><span class="dl">"</span><span class="p">,</span>
<span class="na">input</span> <span class="p">:</span> <span class="p">[</span><span class="dl">""</span><span class="p">,</span> <span class="dl">""</span><span class="p">],</span>
<span class="na">filterDone</span> <span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">===</span> <span class="dl">""</span><span class="p">)</span> <span class="k">return</span> <span class="dl">"</span><span class="s2">Please fill the first input</span><span class="dl">"</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">===</span> <span class="dl">""</span><span class="p">)</span> <span class="k">return</span> <span class="dl">"</span><span class="s2">Please fill the second input</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// Ajax</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">buttonDone</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">OK</span><span class="dl">"</span><span class="p">,</span>
<span class="na">buttonFail</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Cancel</span><span class="dl">"</span><span class="p">,</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">You can even perform an ajax request<br>to validate the inputs:</span><span class="dl">"</span><span class="p">,</span>
<span class="na">input</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">username</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">type</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
<span class="na">label</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Username (user):</span><span class="dl">"</span><span class="p">,</span>
<span class="na">title</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Username</span><span class="dl">"</span>
<span class="p">},</span>
<span class="na">password</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">type</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">password</span><span class="dl">"</span><span class="p">,</span>
<span class="na">label</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Password (secret):</span><span class="dl">"</span><span class="p">,</span>
<span class="na">title</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Password</span><span class="dl">"</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="na">filterDone</span> <span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
<span class="c1">// Note the use of ".then()" instead of ".done()" to return a new promise</span>
<span class="k">return</span> <span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
<span class="na">url</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">login_1.php</span><span class="dl">"</span><span class="p">,</span>
<span class="na">type</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">post</span><span class="dl">"</span><span class="p">,</span>
<span class="na">data</span> <span class="p">:</span> <span class="nx">data</span>
<span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">){</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">response</span> <span class="o">==</span> <span class="kc">false</span><span class="p">)</span> <span class="k">return</span> <span class="dl">"</span><span class="s2">Wrong username or password</span><span class="dl">"</span><span class="p">;</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// Ajax with HTTP status code</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">buttonDone</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">OK</span><span class="dl">"</span><span class="p">,</span>
<span class="na">buttonFail</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Cancel</span><span class="dl">"</span><span class="p">,</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">A better example, using HTTP status codes:</span><span class="dl">"</span><span class="p">,</span>
<span class="na">input</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">username</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">type</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
<span class="na">label</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Username (user):</span><span class="dl">"</span><span class="p">,</span>
<span class="na">title</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Username</span><span class="dl">"</span>
<span class="p">},</span>
<span class="na">password</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">type</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">password</span><span class="dl">"</span><span class="p">,</span>
<span class="na">label</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Password (secret):</span><span class="dl">"</span><span class="p">,</span>
<span class="na">title</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Password</span><span class="dl">"</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="na">filterDone</span> <span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
<span class="c1">// Note the use of ".then()" instead of ".done()" to return a new promise</span>
<span class="k">return</span> <span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
<span class="na">url</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">login_2.php</span><span class="dl">"</span><span class="p">,</span>
<span class="na">type</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">post</span><span class="dl">"</span><span class="p">,</span>
<span class="na">data</span> <span class="p">:</span> <span class="nx">data</span>
<span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
<span class="c1">// HTTP status code 200: Login OK</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">jqXHR</span><span class="p">,</span> <span class="nx">textStatus</span><span class="p">,</span> <span class="nx">errorThrown</span><span class="p">){</span>
<span class="c1">// Any other HTTP status code: Login failed</span>
<span class="k">return</span> <span class="dl">"</span><span class="s2">Message from server (</span><span class="dl">"</span> <span class="o">+</span> <span class="nx">jqXHR</span><span class="p">.</span><span class="nx">status</span> <span class="o">+</span> <span class="dl">"</span><span class="s2">):<br></span><span class="dl">"</span> <span class="o">+</span> <span class="nx">jqXHR</span><span class="p">.</span><span class="nx">responseText</span><span class="p">;</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p">});</span>
</code></pre></div></div>
<p>Here is a server-side PHP example for the simple <strong>Ajax</strong> validation:</p>
<div class="language-php highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><?php</span>
<span class="c1">// Some "very secure" check going on here...</span>
<span class="k">echo</span> <span class="p">(</span><span class="nv">$_POST</span><span class="p">[</span><span class="s1">'username'</span><span class="p">]</span> <span class="o">!=</span> <span class="s1">'user'</span> <span class="o">||</span> <span class="nv">$_POST</span><span class="p">[</span><span class="s1">'password'</span><span class="p">]</span> <span class="o">!=</span> <span class="s1">'secret'</span><span class="p">)</span> <span class="o">?</span> <span class="mi">0</span> <span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">});</span>
<span class="cp">?></span>
</code></pre></div></div>
<p>And here is another server-side PHP example for the <strong>Ajax with HTTP status code</strong> validation:</p>
<div class="language-php highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><?php</span>
<span class="c1">// Again, the check is likely to be performed against a Database,</span>
<span class="c1">// but you get the idea about HTTP headers nonetheless</span>
<span class="k">if</span> <span class="p">(</span><span class="nv">$_POST</span><span class="p">[</span><span class="s1">'username'</span><span class="p">]</span> <span class="o">!=</span> <span class="s1">'user'</span> <span class="o">||</span> <span class="nv">$_POST</span><span class="p">[</span><span class="s1">'password'</span><span class="p">]</span> <span class="o">!=</span> <span class="s1">'secret'</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">header</span><span class="p">(</span><span class="nv">$_SERVER</span><span class="p">[</span><span class="s1">'SERVER_PROTOCOL'</span><span class="p">]</span><span class="mf">.</span><span class="s1">' 401'</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="mi">401</span><span class="p">);</span>
<span class="k">exit</span><span class="p">(</span><span class="s1">'Wrong username or password'</span><span class="p">);</span>
<span class="p">}</span>
<span class="cp">?></span>
});
</code></pre></div></div>
<div>
<button id="example6_simple">Simple</button>
<button id="example6_error">Error Message</button>
<button id="example6_ajax1">Ajax</button>
<button id="example6_ajax2">Ajax with HTTP status code</button>
</div>
<h3 id="example-7---customize-it">Example 7 - Customize it!</h3>
<p>You can customize the whole MessageBox using <code class="language-plaintext highlighter-rouge">customClass</code> and <code class="language-plaintext highlighter-rouge">customOverlayClass</code> options .<br />
Or you can customize single buttons and inputs using <code class="language-plaintext highlighter-rouge">customClass</code> property in their definition. Don’t forget to use the <code class="language-plaintext highlighter-rouge">.messagebox_buttons</code> in your CSS in this case! See the example code:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Custom MessageBox</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">customClass</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">custom_messagebox</span><span class="dl">"</span><span class="p">,</span>
<span class="na">customOverlayClass</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">custom_messagebox_overlay</span><span class="dl">"</span><span class="p">,</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Radius... radius everywhere! <i>(and green too)</i></span><span class="dl">"</span><span class="p">,</span>
<span class="na">title</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">A NICE TITLE, WHY NOT?</span><span class="dl">"</span>
<span class="p">});</span>
</code></pre></div></div>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.custom_messagebox_overlay</span> <span class="p">{</span>
<span class="nl">background-color</span> <span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">220</span><span class="p">,</span> <span class="m">240</span><span class="p">,</span> <span class="m">175</span><span class="p">,</span> <span class="m">0.5</span><span class="p">);</span>
<span class="nl">border</span> <span class="p">:</span> <span class="m">10px</span> <span class="nb">solid</span> <span class="n">rgba</span><span class="p">(</span><span class="m">150</span><span class="p">,</span> <span class="m">190</span><span class="p">,</span> <span class="m">85</span><span class="p">,</span> <span class="m">0.6</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.custom_messagebox</span> <span class="p">{</span>
<span class="nl">background-color</span> <span class="p">:</span> <span class="m">#ddf0b0</span><span class="p">;</span>
<span class="nl">border</span> <span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#99bb55</span><span class="p">;</span>
<span class="nl">border-radius</span> <span class="p">:</span> <span class="m">20px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.custom_messagebox</span> <span class="nc">.messagebox_title</span><span class="o">,</span>
<span class="nc">.custom_messagebox</span> <span class="nc">.messagebox_buttons</span> <span class="p">{</span>
<span class="nl">background-color</span> <span class="p">:</span> <span class="m">#ccea88</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.custom_messagebox</span> <span class="nc">.messagebox_buttons</span> <span class="nt">button</span> <span class="p">{</span>
<span class="nl">background-color</span> <span class="p">:</span> <span class="m">#ddf0b0</span><span class="p">;</span>
<span class="nl">border-radius</span> <span class="p">:</span> <span class="m">20px</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<div>
<button id="example7_messagebox">Custom MessageBox</button>
</div>
<p><br /></p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Custom Buttons</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">MessageBox</span><span class="p">({</span>
<span class="na">buttonDone</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">cool</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">text</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Cool</span><span class="dl">"</span><span class="p">,</span>
<span class="na">customClass</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">custom_button</span><span class="dl">"</span><span class="p">,</span>
<span class="na">keyCode</span> <span class="p">:</span> <span class="mi">13</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="na">buttonFail</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Boring</span><span class="dl">"</span><span class="p">,</span>
<span class="na">input</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">input1</span> <span class="p">:</span> <span class="p">{</span>
<span class="na">type</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
<span class="na">label</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">A custom input</span><span class="dl">"</span><span class="p">,</span>
<span class="na">customClass</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">custom_input</span><span class="dl">"</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="na">message</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">You can customize single buttons or inputs using their <i>customClass</i> property</span><span class="dl">"</span>
<span class="p">});</span>
</code></pre></div></div>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.custom_input</span> <span class="p">{</span>
<span class="nl">border-radius</span> <span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="nl">padding-left</span> <span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="nl">padding-right</span> <span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.custom_button</span> <span class="p">{</span>
<span class="nl">color</span> <span class="p">:</span> <span class="m">#ffffff</span><span class="p">;</span>
<span class="nl">background-color</span> <span class="p">:</span> <span class="m">#0a66cc</span><span class="p">;</span>
<span class="nl">border-radius</span> <span class="p">:</span> <span class="m">50px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.custom_button</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="nl">color</span> <span class="p">:</span> <span class="m">#ffffff</span><span class="p">;</span>
<span class="nl">background-color</span> <span class="p">:</span> <span class="m">#4088cc</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.custom_button</span><span class="nd">:active</span> <span class="p">{</span>
<span class="nl">color</span> <span class="p">:</span> <span class="m">#ffffff</span><span class="p">;</span>
<span class="nl">background-color</span> <span class="p">:</span> <span class="m">#0055aa</span><span class="p">;</span>
<span class="nl">box-shadow</span> <span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<div>
<button id="example7_buttons">Custom Inputs and Buttons</button>
</div>
<h3 id="example-8---set-defaults">Example 8 - Set Defaults</h3>
<p>Using the <a href="#messageboxsetupoptions"><strong><code class="language-plaintext highlighter-rouge">$.MessageBoxSetup(options)</code></strong></a> method you can change the default values for all the MessageBox created in the future:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">$</span><span class="p">.</span><span class="nx">MessageBoxSetup</span><span class="p">({</span>
<span class="na">buttonDone</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Got it!</span><span class="dl">"</span><span class="p">,</span>
<span class="na">speed</span> <span class="p">:</span> <span class="mi">300</span><span class="p">,</span>
<span class="na">top</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">auto</span><span class="dl">"</span>
<span class="p">});</span>
</code></pre></div></div>
<script src="jquery-3.4.0.min.js"></script>
<script src="dist/messagebox.min.js"></script>
<script src="demo.js"></script>
</body>
</html>