<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap4Dialog Examples</title>
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="../src/js/bootstrap4dialog.js?<?=time()?>"></script>
<style>
html, body {min-height: 150vh;}
body {font-size: 0.9rem;}
pre {font-size: 0.8rem ; max-height: 200px; overflow: auto;}
.code-sample {border-bottom: 1px solid #dee2e6!important; margin-bottom: 1rem !important;}
</style>
<!-- php -S localhost:8080 -->
</head>
<body class="py-3">
<div class="container">
<div class="row">
<div class="col col-lg-8 offset-lg-2">
<div class="code-sample">
<h3>Dialog with Title & Message</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
Bootstrap4Dialog.show({
title: 'Sample Title 1',
message: 'Message text goes here'
})
</code>
</pre>
</div>
<div class="code-sample">
<h3>Static Danger Dialog with Title only</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
Bootstrap4Dialog.show({
title: 'Sample Title 2',
type: Bootstrap4Dialog.TYPE_DANGER,
backdrop: Bootstrap4Dialog.BACKDROP_STATIC
})
</code>
</pre>
</div>
<div class="code-sample">
<h3>Warning Centered Dialog Message only, with 2 seconds duration</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
Bootstrap4Dialog.show({
message: 'Sample message will be hidden in 2 seconds',
type: Bootstrap4Dialog.TYPE_WARNING,
centered: true,
duration: 2
})
</code>
</pre>
</div>
<div class="code-sample">
<h3>Long Message Dialog without Backdrop</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
Bootstrap4Dialog.show({
title: 'Long message without backdrop',
type: Bootstrap4Dialog.TYPE_DANGER,
centered: true,
backdrop: Bootstrap4Dialog.BACKDROP_NO,
message: 'Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>'
})
</code>
</pre>
</div>
<div class="code-sample">
<h3>Long Scrollable Message Dialog</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
Bootstrap4Dialog.show({
title: 'Long message text will disappears in 2 seconds',
type: Bootstrap4Dialog.TYPE_DANGER,
scrollable: true,
message: 'Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>',
})
</code>
</pre>
</div>
<div class="code-sample">
<h3>Multiple overlapping Dialogs</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
Bootstrap4Dialog.show({
title: 'Title 1',
centered: true,
type: Bootstrap4Dialog.TYPE_SUCCESS,
});
Bootstrap4Dialog.show({
message: 'Message 2',
type: Bootstrap4Dialog.TYPE_INFO,
duration: 2
})
</code>
</pre>
</div>
<div class="code-sample">
<h3>Large Message Dialog with callbacks</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
Bootstrap4Dialog.show({
title: 'Title 1',
message: $('<div></div>').load('message.html'),
centered: true,
size: Bootstrap4Dialog.SIZE_LARGE,
type: Bootstrap4Dialog.TYPE_DARK,
open: function() {
Bootstrap4Dialog.show({
title: 'Dialog displayed',
size: Bootstrap4Dialog.SIZE_SMALL,
type: Bootstrap4Dialog.TYPE_LIGHT,
duration: 0.5
})
},
close: function() {
Bootstrap4Dialog.show({
message: 'Dialog closed',
size: Bootstrap4Dialog.SIZE_SMALL,
type: Bootstrap4Dialog.TYPE_LIGHT,
backdrop: Bootstrap4Dialog.BACKDROP_NO,
duration: 0.5
})
}
});
</code>
</pre>
</div>
<div class="code-sample">
<h3>Dialog with Buttons</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
Bootstrap4Dialog.show({
title: 'Sample Title',
message: 'Message text goes here',
backdrop: Bootstrap4Dialog.BACKDROP_STATIC,
open: function() {
$('#btn-cancel-2').focus();
},
buttons: [
{
id: 'btn-cancel-2',
label: 'Cancel',
cssClass: 'btn btn-light',
action: function(dialog) {
dialog.modal('hide');
}
},
{
id: 'btn-submit-2',
label: '<i class="fas fa-check"></i> Submit',
cssClass: 'btn btn-sm btn-danger',
action: function(dialog) {
alert('fake form submittion..');
dialog.modal('hide');
}
}
]
})
</code>
</pre>
</div>
<div class="code-sample">
<h3>Close the dialog manually from JavaScript</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
var dialogForManualClose = Bootstrap4Dialog.show({
title: 'Sample Title 1',
message: 'Message text goes here'
})
setTimeout(function() {
dialogForManualClose.modal('hide');
}, 3000)
</code>
</pre>
</div>
</div>
</div>
</div>
<script>
$('.run-code').click(function() {
eval( $(this).parent().parent().find('code').html() )
})
</script>
</body>
</html>