Professional Web Templates

HTML

<head>
  <title>How to use and customize SweetAlert2</title>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.all.min.js"></script>
</head>

<body>
  <div>
    <h1>How to use and customize</h1>
    <div>
      <h4>Modal Type</h4>
      <p>Sweet alert with modal type and customize message alert with html and css</p>
      <button id="success">Success</button>
      <button id="error">Error</button>
      <button id="warning">Warning</button>
      <button id="info">Info</button>
      <button id="question">Question</button>
    </div>
    <br>
    <div>
      <h4>Custom image and alert size</h4>
      <p>Alert with custom icon and background icon</p>
      <button id="icon">Custom Icon</button>
      <button id="image">Custom Background Image</button>
    </div>
    <br>
    <div>
      <h4>Alert with input type</h4>
      <p>Sweet Alert with Input and loading button</p>
      <button id="subscribe">Subscribe</button>
    </div>
    <br>
    <div>
      <h4>Redirect to visit another site</h4>
      <p>Alert to visit a link to another site</p>
      <button id="link">Redirect to Utopian</button>
    </div>
  </div>
</body>

CSS

JS

// Alert Modal Type
		$(document).on('click', '#success', function(e) {
			swal(
				'Success',
				'You clicked the Success button!',
				'success'
			)
		});

$(document).on('click', '#error', function(e) {
			swal(
				'Error!',
				'You clicked the error button!',
				'error'
			)
		});

$(document).on('click', '#warning', function(e) {
			swal(
				'Warning!',
				'You clicked the warning button!',
				'warning'
			)
		});

$(document).on('click', '#info', function(e) {
			swal(
				'Info!',
				'You clicked the info button!',
				'info'
			)
		});

$(document).on('click', '#question', function(e) {
			swal(
				'Question!',
				'You clicked the question button!',
				'question'
			)
		});

// Alert With Custom Icon and Background Image
		$(document).on('click', '#icon', function(event) {
			swal({
				title: 'Custom icon!',
				text: 'Alert with a custom image.',
				imageUrl: 'https://image.shutterstock.com/z/stock-vector--exclamation-mark-exclamation-mark-hazard-warning-symbol-flat-design-style-vector-eps-444778462.jpg',
				imageWidth: 200,
				imageHeight: 200,
				imageAlt: 'Custom image',
				animation: false
			})
		});

$(document).on('click', '#image', function(event) {
			swal({
				title: 'Custom background image, width and padding.',
				width: 700,
				padding: 150,
				background: '#fff url(https://image.shutterstock.com/z/stock-vector--exclamation-mark-exclamation-mark-hazard-warning-symbol-flat-design-style-vector-eps-444778462.jpg)'
			})
		});

// Alert With Input Type
		$(document).on('click', '#subscribe', function(e) {
			swal({
			  title: 'Submit email to subscribe',
			  input: 'email',
			  inputPlaceholder: 'Example@email.xxx',
			  showCancelButton: true,
			  confirmButtonText: 'Submit',
			  showLoaderOnConfirm: true,
			  preConfirm: (email) => {
			    return new Promise((resolve) => {
			      setTimeout(() => {
			        if (email === 'example@email.com') {
			          swal.showValidationError(
			            'This email is already taken.'
			          )
			        }
			        resolve()
			      }, 2000)
			    })
			  },
			  allowOutsideClick: false
			}).then((result) => {
			  if (result.value) {
			    swal({
			      type: 'success',
			      title: 'Thank you for subscribe!',
			      html: 'Submitted email: ' + result.value
			    })
			  }
			})
		});

// Alert Redirect to Another Link
		$(document).on('click', '#link', function(e) {
		    swal({
				title: "Are you sure?", 
				text: "You will be redirected to https://utopian.io", 
				type: "warning",
				confirmButtonText: "Yes, visit link!",
				showCancelButton: true
		    })
		    	.then((result) => {
					if (result.value) {
					    window.location = 'https://utopian.io';
					} else if (result.dismiss === 'cancel') {
					    swal(
					      'Cancelled',
					      'Your stay here :)',
					      'error'
					    )
					}
				})
		});

HTML

CSS

JS

Output