219 lines
11 KiB
HTML
219 lines
11 KiB
HTML
|
<!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>
|