mirror of
https://github.com/Hopiu/djLint.git
synced 2026-05-25 13:03:44 +00:00
774 lines
38 KiB
HTML
774 lines
38 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% block title %}UI Modals {% endblock %}
|
|
<!-- Element injected in the BODY element -->
|
|
{% block body_class %}{% endblock body_class %}
|
|
<!-- Specific Page CSS goes HERE -->
|
|
{% block stylesheets %}
|
|
<!-- Google Font: Source Sans Pro -->
|
|
<link rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
|
|
<!-- SweetAlert2 -->
|
|
<link rel="stylesheet" href="/static/assets/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
|
|
<!-- Toastr -->
|
|
<link rel="stylesheet" href="/static/assets/plugins/toastr/toastr.min.css">
|
|
<!-- Theme style -->
|
|
<link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
|
|
{% endblock stylesheets %}
|
|
{% block content %}
|
|
<!-- Content Wrapper. Contains page content -->
|
|
<div class="content-wrapper">
|
|
<!-- Content Header (Page header) -->
|
|
<section class="content-header">
|
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1>
|
|
Modals & Alerts
|
|
<small>
|
|
new
|
|
</small>
|
|
</h1>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<ol class="breadcrumb float-sm-right">
|
|
<li class="breadcrumb-item">
|
|
<a href="#">Home</a>
|
|
</li>
|
|
<li class="breadcrumb-item active">
|
|
Modals & Alerts
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container-fluid -->
|
|
</section>
|
|
<!-- Main content -->
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card card-primary card-outline">
|
|
<div class="card-header">
|
|
<h3 class="card-title">
|
|
<i class="fas fa-edit"></i>
|
|
Modal Examples
|
|
</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<button type="button"
|
|
class="btn btn-default"
|
|
data-toggle="modal"
|
|
data-target="#modal-default">
|
|
Launch Default Modal
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-primary"
|
|
data-toggle="modal"
|
|
data-target="#modal-primary">
|
|
Launch Primary Modal
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-secondary"
|
|
data-toggle="modal"
|
|
data-target="#modal-secondary">
|
|
Launch Secondary Modal
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-info"
|
|
data-toggle="modal"
|
|
data-target="#modal-info">
|
|
Launch Info Modal
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-danger"
|
|
data-toggle="modal"
|
|
data-target="#modal-danger">
|
|
Launch Danger Modal
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-warning"
|
|
data-toggle="modal"
|
|
data-target="#modal-warning">
|
|
Launch Warning Modal
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-success"
|
|
data-toggle="modal"
|
|
data-target="#modal-success">
|
|
Launch Success Modal
|
|
</button>
|
|
<br />
|
|
<br />
|
|
<button type="button"
|
|
class="btn btn-default"
|
|
data-toggle="modal"
|
|
data-target="#modal-sm">
|
|
Launch Small Modal
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-default"
|
|
data-toggle="modal"
|
|
data-target="#modal-lg">
|
|
Launch Large Modal
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-default"
|
|
data-toggle="modal"
|
|
data-target="#modal-xl">
|
|
Launch Extra Large Modal
|
|
</button>
|
|
<br />
|
|
<br />
|
|
<button type="button"
|
|
class="btn btn-default"
|
|
data-toggle="modal"
|
|
data-target="#modal-overlay">
|
|
Launch Modal with Overlay
|
|
</button>
|
|
<div class="text-muted mt-3">
|
|
Instructions for how to use modals are available on the
|
|
<a href="https://getbootstrap.com/docs/4.4/components/modal/">
|
|
Bootstrap documentation
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<div class="card card-info card-outline">
|
|
<div class="card-header">
|
|
<h3 class="card-title">
|
|
<i class="fas fa-edit"></i>
|
|
Toasts Examples
|
|
<small>
|
|
built in AdminLTE
|
|
</small>
|
|
</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<button type="button" class="btn btn-default toastsDefaultDefault">
|
|
Launch Default Toast
|
|
</button>
|
|
<button type="button" class="btn btn-default toastsDefaultFull">
|
|
Launch Full Toast (with icon)
|
|
</button>
|
|
<button type="button" class="btn btn-default toastsDefaultFullImage">
|
|
Launch Full Toast (with image)
|
|
</button>
|
|
<button type="button" class="btn btn-default toastsDefaultAutohide">
|
|
Launch Default Toasts with autohide
|
|
</button>
|
|
<button type="button" class="btn btn-default toastsDefaultNotFixed">
|
|
Launch Default Toasts with not fixed
|
|
</button>
|
|
<br />
|
|
<br />
|
|
<button type="button" class="btn btn-default toastsDefaultTopLeft">
|
|
Launch Default Toast (topLeft)
|
|
</button>
|
|
<button type="button" class="btn btn-default toastsDefaultBottomRight">
|
|
Launch Default Toast (bottomRight)
|
|
</button>
|
|
<button type="button" class="btn btn-default toastsDefaultBottomLeft">
|
|
Launch Default Toast (bottomLeft)
|
|
</button>
|
|
<br />
|
|
<br />
|
|
<button type="button" class="btn btn-success toastsDefaultSuccess">
|
|
Launch Success Toast
|
|
</button>
|
|
<button type="button" class="btn btn-info toastsDefaultInfo">
|
|
Launch Info Toast
|
|
</button>
|
|
<button type="button" class="btn btn-warning toastsDefaultWarning">
|
|
Launch Warning Toast
|
|
</button>
|
|
<button type="button" class="btn btn-danger toastsDefaultDanger">
|
|
Launch Danger Toast
|
|
</button>
|
|
<button type="button" class="btn btn-default bg-maroon toastsDefaultMaroon">
|
|
Launch Maroon Toast
|
|
</button>
|
|
<div class="text-muted mt-3"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card card-success card-outline">
|
|
<div class="card-header">
|
|
<h3 class="card-title">
|
|
<i class="fas fa-edit"></i>
|
|
SweetAlert2 Examples
|
|
</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<button type="button" class="btn btn-success swalDefaultSuccess">
|
|
Launch Success Toast
|
|
</button>
|
|
<button type="button" class="btn btn-info swalDefaultInfo">
|
|
Launch Info Toast
|
|
</button>
|
|
<button type="button" class="btn btn-danger swalDefaultError">
|
|
Launch Error Toast
|
|
</button>
|
|
<button type="button" class="btn btn-warning swalDefaultWarning">
|
|
Launch Warning Toast
|
|
</button>
|
|
<button type="button" class="btn btn-default swalDefaultQuestion">
|
|
Launch Question Toast
|
|
</button>
|
|
<div class="text-muted mt-3">
|
|
For more examples look at
|
|
<a href="https://sweetalert2.github.io/">
|
|
https://sweetalert2.github.io/
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<div class="card card-warning card-outline">
|
|
<div class="card-header">
|
|
<h3 class="card-title">
|
|
<i class="fas fa-edit"></i>
|
|
Toastr Examples
|
|
</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<button type="button" class="btn btn-success toastrDefaultSuccess">
|
|
Launch Success Toast
|
|
</button>
|
|
<button type="button" class="btn btn-info toastrDefaultInfo">
|
|
Launch Info Toast
|
|
</button>
|
|
<button type="button" class="btn btn-danger toastrDefaultError">
|
|
Launch Error Toast
|
|
</button>
|
|
<button type="button" class="btn btn-warning toastrDefaultWarning">
|
|
Launch Warning Toast
|
|
</button>
|
|
<div class="text-muted mt-3">
|
|
For more examples look at
|
|
<a href="https://codeseven.github.io/toastr/">
|
|
https://codeseven.github.io/toastr/
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
</div>
|
|
<!-- /.col -->
|
|
</div>
|
|
<!-- ./row -->
|
|
</div>
|
|
<!-- /.container-fluid -->
|
|
<div class="modal fade" id="modal-default">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Default Modal</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
One fine body…
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">
|
|
Close
|
|
</button>
|
|
<button type="button" class="btn btn-primary">
|
|
Save changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
<div class="modal fade" id="modal-overlay">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="overlay d-flex justify-content-center align-items-center">
|
|
<i class="fas fa-2x fa-sync fa-spin"></i>
|
|
</div>
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Default Modal</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
One fine body…
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">
|
|
Close
|
|
</button>
|
|
<button type="button" class="btn btn-primary">
|
|
Save changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
<div class="modal fade" id="modal-primary">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-primary">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Primary Modal</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
One fine body…
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-outline-light" data-dismiss="modal">
|
|
Close
|
|
</button>
|
|
<button type="button" class="btn btn-outline-light">
|
|
Save changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
<div class="modal fade" id="modal-secondary">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-secondary">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Secondary Modal</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
One fine body…
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-outline-light" data-dismiss="modal">
|
|
Close
|
|
</button>
|
|
<button type="button" class="btn btn-outline-light">
|
|
Save changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
<div class="modal fade" id="modal-info">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-info">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Info Modal</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
×
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
One fine body…
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-outline-light" data-dismiss="modal">
|
|
Close
|
|
</button>
|
|
<button type="button" class="btn btn-outline-light">
|
|
Save changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
<div class="modal fade" id="modal-warning">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-warning">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">
|
|
Warning Modal
|
|
</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
×
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
One fine body…
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-outline-dark" data-dismiss="modal">
|
|
Close
|
|
</button>
|
|
<button type="button" class="btn btn-outline-dark">
|
|
Save changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
<div class="modal fade" id="modal-success">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-success">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">
|
|
Success Modal
|
|
</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
×
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
One fine body…
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-outline-light" data-dismiss="modal">
|
|
Close
|
|
</button>
|
|
<button type="button" class="btn btn-outline-light">
|
|
Save changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
<div class="modal fade" id="modal-danger">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-danger">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">
|
|
Danger Modal
|
|
</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
×
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
One fine body…
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-outline-light" data-dismiss="modal">
|
|
Close
|
|
</button>
|
|
<button type="button" class="btn btn-outline-light">
|
|
Save changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
<div class="modal fade" id="modal-sm">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">
|
|
Small Modal
|
|
</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
×
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
One fine body…
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">
|
|
Close
|
|
</button>
|
|
<button type="button" class="btn btn-primary">
|
|
Save changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
<div class="modal fade" id="modal-lg">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">
|
|
Large Modal
|
|
</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
×
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
One fine body…
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">
|
|
Close
|
|
</button>
|
|
<button type="button" class="btn btn-primary">
|
|
Save changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
<div class="modal fade" id="modal-xl">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">
|
|
Extra Large Modal
|
|
</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
×
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
One fine body…
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">
|
|
Close
|
|
</button>
|
|
<button type="button" class="btn btn-primary">
|
|
Save changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
</section>
|
|
<!-- /.content -->
|
|
</div>
|
|
{% endblock content %}
|
|
<!-- Specific Page JS goes HERE -->
|
|
{% block javascripts %}
|
|
<!-- jQuery -->
|
|
<script src="/static/assets/plugins/jquery/jquery.min.js"></script>
|
|
<!-- Bootstrap 4 -->
|
|
<script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<!-- SweetAlert2 -->
|
|
<script src="/static/assets/plugins/sweetalert2/sweetalert2.min.js"></script>
|
|
<!-- Toastr -->
|
|
<script src="/static/assets/plugins/toastr/toastr.min.js"></script>
|
|
<!-- AdminLTE App -->
|
|
<script src="/static/assets/js/adminlte.min.js"></script>
|
|
<!-- AdminLTE for demo purposes -->
|
|
<script src="/static/assets/js/demo.js"></script>
|
|
<script>
|
|
$(function() {
|
|
var Toast = Swal.mixin({
|
|
toast: true,
|
|
position: 'top-end',
|
|
showConfirmButton: false,
|
|
timer: 3000
|
|
});
|
|
|
|
$('.swalDefaultSuccess').click(function() {
|
|
Toast.fire({
|
|
icon: 'success',
|
|
title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
|
})
|
|
});
|
|
$('.swalDefaultInfo').click(function() {
|
|
Toast.fire({
|
|
icon: 'info',
|
|
title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
|
})
|
|
});
|
|
$('.swalDefaultError').click(function() {
|
|
Toast.fire({
|
|
icon: 'error',
|
|
title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
|
})
|
|
});
|
|
$('.swalDefaultWarning').click(function() {
|
|
Toast.fire({
|
|
icon: 'warning',
|
|
title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
|
})
|
|
});
|
|
$('.swalDefaultQuestion').click(function() {
|
|
Toast.fire({
|
|
icon: 'question',
|
|
title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
|
})
|
|
});
|
|
|
|
$('.toastrDefaultSuccess').click(function() {
|
|
toastr.success('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
|
|
});
|
|
$('.toastrDefaultInfo').click(function() {
|
|
toastr.info('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
|
|
});
|
|
$('.toastrDefaultError').click(function() {
|
|
toastr.error('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
|
|
});
|
|
$('.toastrDefaultWarning').click(function() {
|
|
toastr.warning('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
|
|
});
|
|
|
|
$('.toastsDefaultDefault').click(function() {
|
|
$(document).Toasts('create', {
|
|
title: 'Toast Title',
|
|
body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
|
})
|
|
});
|
|
$('.toastsDefaultTopLeft').click(function() {
|
|
$(document).Toasts('create', {
|
|
title: 'Toast Title',
|
|
position: 'topLeft',
|
|
body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
|
})
|
|
});
|
|
$('.toastsDefaultBottomRight').click(function() {
|
|
$(document).Toasts('create', {
|
|
title: 'Toast Title',
|
|
position: 'bottomRight',
|
|
body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
|
})
|
|
});
|
|
$('.toastsDefaultBottomLeft').click(function() {
|
|
$(document).Toasts('create', {
|
|
title: 'Toast Title',
|
|
position: 'bottomLeft',
|
|
body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
|
})
|
|
});
|
|
$('.toastsDefaultAutohide').click(function() {
|
|
$(document).Toasts('create', {
|
|
title: 'Toast Title',
|
|
autohide: true,
|
|
delay: 750,
|
|
body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
|
})
|
|
});
|
|
$('.toastsDefaultNotFixed').click(function() {
|
|
$(document).Toasts('create', {
|
|
title: 'Toast Title',
|
|
fixed: false,
|
|
body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
|
})
|
|
});
|
|
$('.toastsDefaultFull').click(function() {
|
|
$(document).Toasts('create', {
|
|
body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
|
|
title: 'Toast Title',
|
|
subtitle: 'Subtitle',
|
|
icon: 'fas fa-envelope fa-lg',
|
|
})
|
|
});
|
|
$('.toastsDefaultFullImage').click(function() {
|
|
$(document).Toasts('create', {
|
|
body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
|
|
title: 'Toast Title',
|
|
subtitle: 'Subtitle',
|
|
image: '../../dist/img/user3-128x128.jpg',
|
|
imageAlt: 'User Picture',
|
|
})
|
|
});
|
|
$('.toastsDefaultSuccess').click(function() {
|
|
$(document).Toasts('create', {
|
|
class: 'bg-success',
|
|
title: 'Toast Title',
|
|
subtitle: 'Subtitle',
|
|
body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
|
})
|
|
});
|
|
$('.toastsDefaultInfo').click(function() {
|
|
$(document).Toasts('create', {
|
|
class: 'bg-info',
|
|
title: 'Toast Title',
|
|
subtitle: 'Subtitle',
|
|
body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
|
})
|
|
});
|
|
$('.toastsDefaultWarning').click(function() {
|
|
$(document).Toasts('create', {
|
|
class: 'bg-warning',
|
|
title: 'Toast Title',
|
|
subtitle: 'Subtitle',
|
|
body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
|
})
|
|
});
|
|
$('.toastsDefaultDanger').click(function() {
|
|
$(document).Toasts('create', {
|
|
class: 'bg-danger',
|
|
title: 'Toast Title',
|
|
subtitle: 'Subtitle',
|
|
body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
|
})
|
|
});
|
|
$('.toastsDefaultMaroon').click(function() {
|
|
$(document).Toasts('create', {
|
|
class: 'bg-maroon',
|
|
title: 'Toast Title',
|
|
subtitle: 'Subtitle',
|
|
body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
|
})
|
|
});
|
|
});
|
|
|
|
</script>
|
|
{% endblock javascripts %}
|