Sweet Alerts
- Robotech
- /
- Advanced UI
- /
- Sweet Alerts
Trigger modal And Trigger toast
Save changes to "Untitled 1" before closing?
Save As
Cancel
Close without Saving
<!-- Css -->
<link rel="stylesheet" href="assets/libs/sweetalert2/sweetalert2.min.css">
<link rel="stylesheet" href="assets/libs/animate.css/animate.min.css">
<!-- JS -->
<script src="assets/libs/sweetalert2/sweetalert2.all.min.js"></script>
<script src="assets/js/pages/sweetalert.init.js"></script>
<!-- HTML -->
<button type="button" data-swal-template="#my-template" onclick="executeExample('TriggerModalToast')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Click me</button>
<button type="button" data-swal-toast-template="#my-template" onclick="executeExample('TriggerModalToast')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Click me</button>
<template id="my-template">
<swal-title>
Save changes to "Untitled 1" before closing?
</swal-title>
<swal-icon type="warning" color="red"></swal-icon>
<swal-button type="confirm">
Save As
</swal-button>
<swal-button type="cancel">
Cancel
</swal-button>
<swal-button type="deny">
Close without Saving
</swal-button>
<swal-param name="allowEscapeKey" value="false" />
<swal-param
name="customClass"
value='{ "popup": "my-popup" }' />
</template>
<!-- Css -->
<link rel="stylesheet" href="assets/libs/sweetalert2/sweetalert2.min.css">
<link rel="stylesheet" href="assets/libs/animate.css/animate.min.css">
<!-- JS -->
<script src="assets/libs/sweetalert2/sweetalert2.all.min.js"></script>
<script src="assets/js/pages/sweetalert.init.js"></script>
<!-- HTML -->
<button type="button" onclick="executeExample('success')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Success</button>
<button type="button" onclick="executeExample('error')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Error</button>
<button type="button" onclick="executeExample('warning')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Warning</button>
<button type="button" onclick="executeExample('info')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Info</button>
<button type="button" onclick="executeExample('question')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Question</button>
|
A basic message
|
|
|
A title with a text under
|
|
|
A modal with a title, an error icon, a text, and a footer
|
|
|
Custom HTML description and buttons with ARIA labels
|
|
|
A dialog with three buttons
|
|
|
A custom positioned dialog
|
|
|
Custom animation with Animation
|
|
|
A confirm dialog, with a function attached to the "Confirm"-button...
|
|
|
... and by passing a parameter, you can execute something else for "Cancel".
|
|
|
A message with a custom image
|
|
|
A message with custom width, padding, background and animated Nyan Cat
|
|
|
A message with auto close timer
|
|
|
Right-to-left support for Arabic, Persian, Hebrew, and other RTL languages
|
|
|
Mixin example
|
|
|
Declarative template example
|
|
<!-- Css -->
<link rel="stylesheet" href="assets/libs/sweetalert2/sweetalert2.min.css">
<link rel="stylesheet" href="assets/libs/animate.css/animate.min.css">
<!-- JS -->
<script src="assets/libs/sweetalert2/sweetalert2.all.min.js"></script>
<script src="assets/js/pages/sweetalert.init.js"></script>
<!-- HTML -->
<table class="w-full">
<tbody>
<!-- 1 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-400">
A basic message
</td>
<td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400 text-right">
<button type="button" onclick="executeExample('basicMessage')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Click me</button>
</td>
</tr>
<!-- 2 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-400">
A title with a text under
</td>
<td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400 text-right">
<button type="button" onclick="executeExample('titleText')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Click me</button>
</td>
</tr>
<!-- 3 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-400">
A modal with a title, an error icon, a text, and a footer
</td>
<td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400 text-right">
<button type="button" onclick="executeExample('errorType')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Click me</button>
</td>
</tr>
<!-- 4 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-400">
Custom HTML description and buttons with ARIA labels
</td>
<td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400 text-right">
<button type="button" onclick="executeExample('customHtml')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Click me</button>
</td>
</tr>
<!-- 5 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-400">
A dialog with three buttons
</td>
<td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400 text-right">
<button type="button" onclick="executeExample('threeButtons')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Click me</button>
</td>
</tr>
<!-- 6 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-400">
A custom positioned dialog
</td>
<td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400 text-right">
<button type="button" onclick="executeExample('customPosition')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Click me</button>
</td>
</tr>
<!-- 7 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-400">
Custom animation with Animation
</td>
<td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400 text-right">
<button type="button" onclick="executeExample('customAnimation')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Click me</button>
</td>
</tr>
<!-- 8 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-400">
A confirm dialog, with a function attached to the "Confirm"-button...
</td>
<td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400 text-right">
<button type="button" onclick="executeExample('warningConfirm')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Click me</button>
</td>
</tr>
<!-- 9 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-400">
... and by passing a parameter, you can execute something else for "Cancel".
</td>
<td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400 text-right">
<button type="button" onclick="executeExample('handleDismiss')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Click me</button>
</td>
</tr>
<!-- 10 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-400">
A message with a custom image
</td>
<td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400 text-right">
<button type="button" onclick="executeExample('customImage')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Click me</button>
</td>
</tr>
<!-- 11 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-400">
A message with custom width, padding, background and animated Nyan Cat
</td>
<td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400 text-right">
<button type="button" onclick="executeExample('customWidth')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Click me</button>
</td>
</tr>
<!-- 12 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-400">
A message with auto close timer
</td>
<td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400 text-right">
<button type="button" onclick="executeExample('timer')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Click me</button>
</td>
</tr>
<!-- 13 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-400">
Right-to-left support for Arabic, Persian, Hebrew, and other RTL languages
</td>
<td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400 text-right">
<button type="button" onclick="executeExample('rtl')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Click me</button>
</td>
</tr>
<!-- 14 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-400">
Mixin example
</td>
<td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400 text-right">
<button type="button" onclick="executeExample('mixin')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Click me</button>
</td>
</tr>
<!-- 15 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-400">
Declarative template example
</td>
<td class="p-3 text-sm font-medium text-gray-600 whitespace-nowrap dark:text-gray-400 text-right">
<button type="button" onclick="executeExample('declarativeTemplate')" class=" inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500 text-sm font-medium py-1 px-3 rounded mb-1">Click me</button>
</td>
</tr>
</tbody>
</table>
@@include("partials/footer/footer.html")