Skip to content

Commit

Permalink
Added example about overlapping dialogs
Browse files Browse the repository at this point in the history
  • Loading branch information
@stefangabos
stefangabos committed Sep 3, 2019
1 parent 229807e commit 5f966c9
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 17 deletions.
53 changes: 51 additions & 2 deletions examples/examples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
});
});

Expand Down
36 changes: 31 additions & 5 deletions examples/flat.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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">
Expand All @@ -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>

Expand All @@ -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">
Expand Down
36 changes: 31 additions & 5 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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">
Expand All @@ -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>

Expand All @@ -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">
Expand Down
36 changes: 31 additions & 5 deletions examples/materialize.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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">
Expand All @@ -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>

Expand All @@ -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">
Expand Down

0 comments on commit 5f966c9

Please sign in to comment.