Sweet Alerts

Robotech
/
Advanced UI
/
Sweet Alerts

Trigger modal And Trigger toast


<!-- 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>

Alert with Icons


<!-- 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>

Examples

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")