how to make a beautiful alert with sweet alert || web developer joy

December 25, 2021 0 comments
Share:




how to make a beautiful alert with sweet alert || sweet alert || javascript sweet alert || animation alert || pop up an alert like this







if you want to make like this alert. so you should follow some instructions:

step 1  :  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

copy this CDN link and paste it to your index.html file

step 2 :


<script>




swal({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success", //note you can write here error or warning or info 
  button: "ok",
});


</script>



paste this code on your index.html or another file this output to give you same to same
output



if you need a cancel button in your alert so you should try this one code:  

buttons:true  .




swal({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success", //note you can write here error or warning or info 
  buttons: true,
});

paste this code on your index.html or another file this output to give you same to same
output



if you want to change or edit your alert button then you can use this code : 

button:["delete", "save"] .





swal({
  title: "Are you sure!",
  text: "You clicked the button!",
  icon: "success", //note you can write here error or warning or info 
  buttons: ["delete","save"]
});




you will get same to same output





index.html file :


<!DOCTYPE html>
<html>
<head>
	<title>sweet alert || web developer joy</title>
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>




	<script type="text/javascript">



     swal({
    title: "Are you sure!",
    text: "You clicked the button!",
    icon: "warning",
    buttons:["delete","save"]
    });



	</script>


</body>
</html>



@copyright || web developer joy



Labels:
Share:

Post a Comment

No comments

Subscribe to: Post Comments ( Atom )