how to use sweet alert in html?

Today, We want to share with you how to use sweet alert in html.In this post we will show you sweet alert html, hear for how to use sweet alert in php we will give you demo and example for implement.In this post, we will learn about how to use sweet alert in codeigniter? with an example.

how to use sweet alert in javascript?

Example 1: sweet alert 2 do action on confirm

Swal.fire({  
  title: 'Do you want to save the changes?',  
  showDenyButton: true,  showCancelButton: true,  
  confirmButtonText: `Save`,  
  denyButtonText: `Don't save product`,
}).then((result) => {    
    if (result.isConfirmed) {    
    	Swal.fire('Saved!', '', 'success')  
    } else if (result.isDenied) {    
    	Swal.fire('Product Changes are not saved', '', 'info')  
 	}
});

sweet alert js

swal({
     title: "Deleted!",
     text: "Your row has been deleted.",
     button: "Close", // Text on button
     icon: "success", 
     timer: 3000, 
      buttons: {
        confirm: {
          text: "OK",
          value: true,
          visible: true,
          className: "",
          closeModal: true
        },
        cancel: {
          text: "Cancel",
          value: false,
          visible: true,
          className: "",
          closeModal: true,
        }
      }
     });

sweet alert

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Sweet Alert – Success Message

HTML Code

<h1>Sweet Alert.js</h1>
<button>Welcome, To free Download!</button>

JS Code

$("button").click(function() {
  swal("Product Updated Successfully", "Good Luckk, you pressed a button", "success")
});

CSS Code

body{
  text-align: center;
  font-size: 14px;
  background-color: #DBE3E6;
}
h1{
  font-family: 'Pacifico', cursive;
  font-size: 6em;
  color: #252E40;
  line-height: 2.0em;
}
button{
  background-color: #F16669;
  border: none;
  padding: 15px 20px;
  color: white;
  font-size: 2em;
  margin-top: 40px;
  transition: 1s;
  cursor: pointer;
  border-radius: 4px;
}

button:hover{
  background-color: darken(#F16669, 30)
}

I hope you get an idea about sweet alert multiple inputs.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  How to use sweet alert for delete confirm in Codeigniter?

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Removing # hash from URL in AngularJS
  2. Read Also:  Get Images Storage File Path using Laravel
  3. Read Also:  How to find the nth prime number in Java?
  4. Read Also:  AngularJS Insert using PHP MySQLi
  5. Read Also:  html starter template bootstrap code for homepage
  6. Read Also:  How To Create a Read More Read Less Button using jQuery?
  7. Read Also:  Vue.js Alert popup-Dialog Box using PHP and CSS
  8. Read Also:  PHP Laravel 6 SweetAlert jQuery Ajax Delete Rows Example
  9. Read Also:  jQuery Text Avatars Using CSS Like Gmail
  10. Read Also:  Fix 504 Gateway Timeout Nginx Error
CLOSEX