@@include('global/_head.html',{ "headTitle": "Sweetalert 2", "prism": "true", }) @@include('docs/_sidebar.html', {"page": "formelements"})
@@include('global/_page-header.html', {"PageHeader": "sticky-top"} )

Sweetalert 2

How it works

A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. For more info, please visit the sweetalert2.github.io

Sweetalert 2 use class with .btn .sa-basic, .sa-title-text, .sa-title-error, .sa-buttons, .sa-position, .sa-image

  • A basic message
  • A title with a text under
  • A dialog with three buttons
  • A custom positioned dialog
  • A message with a custom image
  • A message with auto close timer
  • AJAX request example
  • A modal with a title, an error icon, a text, and a footer
<!-- Plugin Js -->
<script src="assets/bundles/sweetalert2.bundle.js"></script>

<!-- Jquery Page Js -->
<script>
	document.querySelector(".sa-basic").addEventListener('click', function(){
		Swal.fire("Our First Alert");
	});
</script>
@@include('docs/_quick-url.html')
@@include('global/_page-footer.html', {"PageFooter": ""} )
@@include('global/_full-screen-menu.html', {"divClass": ""} ) @@include('global/_need-help.html', {"divClass": "offcanvas-start"} ) @@include('global/_quick-access.html', {"divClass": "offcanvas-end"} ) @@include('global/_theme-setting.html', {"divClass": "offcanvas-end"} ) @@include('global/_site-map.html', {"divClass": "offcanvas-start sm"} ) @@include('global/_body-hero-img-2.html', {"bodyBgClass": "body-bg"} ) @@include('global/_plugin-script.html', { "sweetalert2": "true", "prism": "true", })