From 5f966c90f0fc516c48d1574c67b85ca452f3516c Mon Sep 17 00:00:00 2001
From: stefangabos <contact@stefangabos.ro>
Date: Tue, 3 Sep 2019 22:20:49 +0300
Subject: [PATCH] Added example about overlapping dialogs

---
 examples/examples.js      | 53 +++++++++++++++++++++++++++++++++++++--
 examples/flat.html        | 36 ++++++++++++++++++++++----
 examples/index.html       | 36 ++++++++++++++++++++++----
 examples/materialize.html | 36 ++++++++++++++++++++++----
 4 files changed, 144 insertions(+), 17 deletions(-)

diff --git a/examples/examples.js b/examples/examples.js
index d0e08c2..c50f12d 100644
--- a/examples/examples.js
+++ b/examples/examples.js
@@ -283,11 +283,60 @@ $(document).ready(function() {
     });
 
     $('#example11').on('click', function() {
+        new $.Zebra_Dialog('This is the first dialog box. Try opening another one.', {
+            auto_focus_button: $('body.materialize').length ? false : true,
+            buttons: [
+                'Close',
+                {
+                    caption: 'Open another dialog box',
+                    callback: function() {
+                        new $.Zebra_Dialog('This is the second dialog box. Notice that the backdrops are not overlapping. Pressing ESC or clicking on the backdrop will close this dialog box but not the first one.', {
+                            auto_focus_button: $('body.materialize').length ? false : true,
+                            buttons: [
+                                'Close',
+                                {
+                                    caption: 'Open yet another dialog box',
+                                    callback: function() {
+                                        new $.Zebra_Dialog('This is the third dialog box. Notice that the backdrops are not overlapping. Pressing ESC or clicking on the backdrop will close this dialog box but not the other ones.', {
+                                            auto_focus_button: $('body.materialize').length ? false : true,
+                                            buttons: [
+                                                'Close',
+                                                {
+                                                    caption: 'Open the last dialog box',
+                                                    callback: function() {
+                                                        new $.Zebra_Dialog('This is the fourth dialog box. Notice that the backdrops are not overlapping. Pressing ESC or clicking on the backdrop will close this dialog box but not the other ones.', {
+                                                            auto_focus_button: $('body.materialize').length ? false : true,
+                                                            position: ['left + 20', 'top + 20'],
+                                                            title: 'Fourth dialog box'
+                                                        });
+                                                        return false;
+
+                                                    }
+                                                }
+                                            ],
+                                            position: ['left + 20', 'bottom - 20'],
+                                            title: 'Third dialog box'
+                                        });
+                                        return false;
+                                    }
+                                }
+                            ],
+                            position: ['right - 20', 'top + 20'],
+                            title: 'Second dialog box'
+                        });
+                        return false;
+                    }
+                }
+            ],
+            title: 'First dialog box'
+        });
+    });
+
+    $('#example12').on('click', function() {
         new $.Zebra_Dialog('I love coffee!', {
             auto_focus_button: $('body.materialize').length ? false : true,
             custom_class: 'myclass',
-            title: 'Customizing the appearance',
-            width: 600
+            title: 'Customizing the appearance'
         });
     });
 
diff --git a/examples/flat.html b/examples/flat.html
index 92527d5..db6ec5f 100644
--- a/examples/flat.html
+++ b/examples/flat.html
@@ -84,8 +84,9 @@ <h1>Zebra Dialog</h1>
                             08. <a href="#content-from-element">Content loaded from an element on the page</a><br>
                             09. <a href="#content-from-ajax">Content loaded via AJAX</a><br>
                             10. <a href="#content-iframe">Content loaded in an iFrame</a><br>
+                            11. <a href="#overlapping">Overlapping dialogs</a><br>
                             <a name="dialog-types"></a>
-                            11. <a href="#customizing-appearance">Customizing the appearance</a><br>
+                            12. <a href="#customizing-appearance">Customizing the appearance</a><br>
                         </div>
                     </div>
 
@@ -488,6 +489,32 @@ <h3><strong>10.</strong> Content loaded in an iFrame</h3>
                         Click <a href="javascript:void(0)" id="example10">here</a> to open.
                     </div>
 
+                    <a name="overlapping"></a>
+
+                    <div class="top">
+                        <a href="#top" class="small">&#x25b2 To the top</a>
+                    </div>
+
+                    <!-- =========================================================================================== -->
+
+                    <h3><strong>11.</strong> Overlapping dialogs</h3>
+
+                    <pre class="brush:javascript">
+                    // unless explicitly specified, the height of the dialog box will
+                    // be automatically computed to fit the loaded content's height
+
+                    new $.Zebra_Dialog({
+                        source: {
+                            ajax: "ajax.html"
+                        },
+                        title: "Content loaded via AJAX",
+                        width: 600
+                    });</pre>
+
+                    <div class="well">
+                        Click <a href="javascript:void(0)" id="example11">here</a> to open.
+                    </div>
+
                     <a name="customizing-appearance"></a>
 
                     <div class="top">
@@ -496,7 +523,7 @@ <h3><strong>10.</strong> Content loaded in an iFrame</h3>
 
                     <!-- =========================================================================================== -->
 
-                    <h3><strong>11.</strong> Customizing the appearance</h3>
+                    <h3><strong>12.</strong> Customizing the appearance</h3>
 
                     <p>Let's make the title bar have a dark-blue background and show a custom icon</p>
 
@@ -518,12 +545,11 @@ <h3><strong>11.</strong> Customizing the appearance</h3>
                     <pre class="brush:javascript">
                     new $.Zebra_Dialog("I love coffee!", {
                         custom_class: "myclass",
-                        title: "Customizing the appearance",
-                        width: 600
+                        title: "Customizing the appearance"
                     });</pre>
 
                     <div class="well">
-                        Click <a href="javascript:void(0)" id="example11">here</a> to open.
+                        Click <a href="javascript:void(0)" id="example12">here</a> to open.
                     </div>
 
                     <div class="top">
diff --git a/examples/index.html b/examples/index.html
index cb5717f..0dda64f 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -84,8 +84,9 @@ <h1>Zebra Dialog</h1>
                             08. <a href="#content-from-element">Content loaded from an element on the page</a><br>
                             09. <a href="#content-from-ajax">Content loaded via AJAX</a><br>
                             10. <a href="#content-iframe">Content loaded in an iFrame</a><br>
+                            11. <a href="#overlapping">Overlapping dialogs</a><br>
                             <a name="dialog-types"></a>
-                            11. <a href="#customizing-appearance">Customizing the appearance</a><br>
+                            12. <a href="#customizing-appearance">Customizing the appearance</a><br>
                         </div>
                     </div>
 
@@ -488,6 +489,32 @@ <h3><strong>10.</strong> Content loaded in an iFrame</h3>
                         Click <a href="javascript:void(0)" id="example10">here</a> to open.
                     </div>
 
+                    <a name="overlapping"></a>
+
+                    <div class="top">
+                        <a href="#top" class="small">&#x25b2 To the top</a>
+                    </div>
+
+                    <!-- =========================================================================================== -->
+
+                    <h3><strong>11.</strong> Overlapping dialogs</h3>
+
+                    <pre class="brush:javascript">
+                    // unless explicitly specified, the height of the dialog box will
+                    // be automatically computed to fit the loaded content's height
+
+                    new $.Zebra_Dialog({
+                        source: {
+                            ajax: "ajax.html"
+                        },
+                        title: "Content loaded via AJAX",
+                        width: 600
+                    });</pre>
+
+                    <div class="well">
+                        Click <a href="javascript:void(0)" id="example11">here</a> to open.
+                    </div>
+
                     <a name="customizing-appearance"></a>
 
                     <div class="top">
@@ -496,7 +523,7 @@ <h3><strong>10.</strong> Content loaded in an iFrame</h3>
 
                     <!-- =========================================================================================== -->
 
-                    <h3><strong>11.</strong> Customizing the appearance</h3>
+                    <h3><strong>12.</strong> Customizing the appearance</h3>
 
                     <p>Let's make the title bar have a dark-blue background and show a custom icon</p>
 
@@ -518,12 +545,11 @@ <h3><strong>11.</strong> Customizing the appearance</h3>
                     <pre class="brush:javascript">
                     new $.Zebra_Dialog("I love coffee!", {
                         custom_class: "myclass",
-                        title: "Customizing the appearance",
-                        width: 600
+                        title: "Customizing the appearance"
                     });</pre>
 
                     <div class="well">
-                        Click <a href="javascript:void(0)" id="example11">here</a> to open.
+                        Click <a href="javascript:void(0)" id="example12">here</a> to open.
                     </div>
 
                     <div class="top">
diff --git a/examples/materialize.html b/examples/materialize.html
index b53a543..a2e555d 100644
--- a/examples/materialize.html
+++ b/examples/materialize.html
@@ -84,8 +84,9 @@ <h1>Zebra Dialog</h1>
                             08. <a href="#content-from-element">Content loaded from an element on the page</a><br>
                             09. <a href="#content-from-ajax">Content loaded via AJAX</a><br>
                             10. <a href="#content-iframe">Content loaded in an iFrame</a><br>
+                            11. <a href="#overlapping">Overlapping dialogs</a><br>
                             <a name="dialog-types"></a>
-                            11. <a href="#customizing-appearance">Customizing the appearance</a><br>
+                            12. <a href="#customizing-appearance">Customizing the appearance</a><br>
                         </div>
                     </div>
 
@@ -488,6 +489,32 @@ <h3><strong>10.</strong> Content loaded in an iFrame</h3>
                         Click <a href="javascript:void(0)" id="example10">here</a> to open.
                     </div>
 
+                    <a name="overlapping"></a>
+
+                    <div class="top">
+                        <a href="#top" class="small">&#x25b2 To the top</a>
+                    </div>
+
+                    <!-- =========================================================================================== -->
+
+                    <h3><strong>11.</strong> Overlapping dialogs</h3>
+
+                    <pre class="brush:javascript">
+                    // unless explicitly specified, the height of the dialog box will
+                    // be automatically computed to fit the loaded content's height
+
+                    new $.Zebra_Dialog({
+                        source: {
+                            ajax: "ajax.html"
+                        },
+                        title: "Content loaded via AJAX",
+                        width: 600
+                    });</pre>
+
+                    <div class="well">
+                        Click <a href="javascript:void(0)" id="example11">here</a> to open.
+                    </div>
+
                     <a name="customizing-appearance"></a>
 
                     <div class="top">
@@ -496,7 +523,7 @@ <h3><strong>10.</strong> Content loaded in an iFrame</h3>
 
                     <!-- =========================================================================================== -->
 
-                    <h3><strong>11.</strong> Customizing the appearance</h3>
+                    <h3><strong>12.</strong> Customizing the appearance</h3>
 
                     <p>Let's make the title bar have a dark-blue background and show a custom icon</p>
 
@@ -518,12 +545,11 @@ <h3><strong>11.</strong> Customizing the appearance</h3>
                     <pre class="brush:javascript">
                     new $.Zebra_Dialog("I love coffee!", {
                         custom_class: "myclass",
-                        title: "Customizing the appearance",
-                        width: 600
+                        title: "Customizing the appearance"
                     });</pre>
 
                     <div class="well">
-                        Click <a href="javascript:void(0)" id="example11">here</a> to open.
+                        Click <a href="javascript:void(0)" id="example12">here</a> to open.
                     </div>
 
                     <div class="top">