how to use sweet alert in php or html | Sweet alert in php echo | How to edit a JavaScript alert box title? | alert box css style

how to use sweet alert in php or html | Sweet alert in php echo | How to edit a JavaScript alert box title | alert box css style

The answer to all the questions given above will be seen below.

How to edit a JavaScript alert box title?

If you want to set or change the name of the title that appears in the alert box, then how can you do it?


This code does not set any type of title

If you want to show the title in the above code, then you cannot show it, with this code, you have given below code for this, the title will be displayed in them without any css.


Alert box css style

You can see the sample of how to do css of alert box is given below, also you can use this source code of alert box, if you want to show alert in professional mode without css then more code below will get

<!DOCTYPE html> <html> <head> <script src= “https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”> </script> <script> function geeks(msg, gfg) { var confirmBox = $(“#container”); /* Trace message to display */ confirmBox.find(“.message”).text(msg); /* Calling function */ confirmBox.find(“.yes”).unbind().click(function() { confirmBox.hide(); }); confirmBox.find(“.yes”).click(gfg); confirmBox.show(); } </script> <style> /* Body alignment */ body { text-align: center; } /* Color for h1 tag */ h1 { color: green; } /* Designing dialog box */ #container { display: none; background-color: purple; color: white; position: absolute; width: 350px; border-radius: 5px; left: 50%; margin-left: -160px; padding: 16px 8px 8px; box-sizing: border-box; } /* Designing dialog box’s okay button */ #container button { background-color: yellow; display: inline-block; border-radius: 5px; border: 2px solid gray; padding: 5px; text-align: center; width: 60px; } /* Dialog box message decorating */ #container .message { text-align: left; padding: 10px 30px; } </style> </head> <body onload=”geeks();”> <h1>CODING FOR BEGINNERS</h1> <b>Designing the alert box with css</b> <br><br> <div id=”container”> <div class=”message”> Thanks for Subscription<br>Enjoy all service</div> <button class=”yes”>okay</button> </div> <input type=”button” value=”Subscribe”/> </body> </html>

Output this alert box :



How to use sweet alert in php or html

If you also want to use Sweet Alert in your website, then follow the steps given below.

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


<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

To use the Sweet Alert method on your site, paste the above code into the head of your website.

It is necessary to add this script to your website without it it will not work

<script> swal(Here’s the title!, …and here’s the text!); </script>


swal(Good job!, You clicked the button!, success);


and with a third argument, you can add an icon to your alert! There are 4 predefined ones: "warning""error""success" and "info".


title: Are you sure?,
text: Once deleted, you will not be able to recover this imaginary file!,
icon: warning,
buttons: true,
dangerMode: true,
.then((willDelete) => {
if (willDelete) {
swal(Poof! Your imaginary file has been deleted!, {
icon: success,
} else {
swal(Your imaginary file is safe!);



<?php $app_no = “63256454545”;
if ($app_no ==false) {
echo ‘<script>
swal({ title: “Something Wrong”, text: “Your Mobile Number or Date of Birth is Wrong!”, icon: “error”, button: “Try Again”, }); </script>’;
echo ‘<script> swal({ title: “Congratulations”, text: “Your Application Number is ‘.$app_no.'”, icon: “success“, button: “Ok”, }); </script>’;
}; ?>

The modal’s text. It can either be added as a configuration under the key text (as in the example below), or passed as the first and only parameter (e.g. swal("Hello world!")), or the second one if you have multiple string parameters (e.g. swal("A title", "Hello world!"))…read more