Demos
Build a quick alert dialog.
JS
MarcDialogs.alert('Custom message');
Result
Try it out:
Build a quick confirm dialog.
JS
MarcDialogs.confirm('Confirm message', function(){alert('do something here');MarcDialogs.close()});
Result
Try it out:
Build your own custom dialog.
HTML
<div id="dialog-custom1" class="dialog">
This is a custom dialog.
<label for="login">Username</label>
<input type="text" id="login" />
<label for="pwd">Password</label>
<input type="password" id="pwd" />
<div class="buttons">
<button onclick="sendLoginForm()">Login</button>
<button onclick="MarcDialogs.close()">Cancel</button>
</div>
</div>
JS
MarcDialogs.open('custom1');
Result
Try it out:
This is a custom dialog.
Dialogs are stacked automatically as the user opens them. Mobile browsers can use the back button to close dialogs.
HTML
<div id="dialog-custom2" class="dialog">
You can stack dialogs. Try to edit tags.<br/>
<label for="item">Item</label>
<input type="text" class="full-width" />
Tags<br/>
<span id="tags">#tag1 #tag2</span> <span onclick="MarcDialogs.open('custom3')">Edit</span>
<div class="buttons">
<button onclick="MarcDialogs.close()">Accept</button>
</div>
</div>
<div id="dialog-custom3" class="dialog">
<input type="checkbox" id="checkbox0" checked /><label for="checkbox0">#tag1</label><br/>
<input type="checkbox" id="checkbox1" checked /><label for="checkbox1">#tag2</label><br/>
<input type="checkbox" id="checkbox2" /><label for="checkbox2">#tag3</label><br/>
<!-- ... -->
<div class="buttons">
<button onclick="/* ... */ MarcDialogs.close()">Accept</button>
</div>
</div>
JS
MarcDialogs.open('custom2');
Result
Try it out:
You can stack dialogs. Try to edit tags.
Tags
#tag1 #tag2 Edit