- Trending Categories
- Data Structure
- Operating System
- C Programming
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Design HTML Part
Let’s start with the HTML code
Steps to writing HTML code to create a custom alert box −
Create a script tag and link the jQuery file to the code so that we can use its methods.
Create a division tag with an id named “ready”.
Inside the division tag create another division tag with the class name “message” which will contain a message we want to print in the alert box.
Now create a button using a button tag with a class name btn.
At last, create an input type button outside the div tag which will be used to call a function named ‘myfunction’.
Define the function which was declared above as myfunction with two parameters declared inside it.
Create a variable named as box calling the div id.
Now we will show the message inside the box using the text() method.
In this step the unbind() method will remove all the event handlers and hide the alert box whenever the ok button clicked.
In the last step the click() method will be used to handle the alert messages.
Now we will write the CSS code to provide the styling to the alert box.
Steps to write the CSS code to create a custom alert box are given as −
Firstly, we will style the whole division tag ready which is our alert box.
For the alert box we will provide the background color, margin, padding, position, border, and sizing.
Now will style the button present inside the alert box by providing it color, margin, radius, border, and width. Also align the text to the centre.
At last, provide the styling to the text present in the alert box by aligning the text.
We can use the below code to create a custom alert box −
A button will appear and when you click it the alert box will appear on screen and when you click the OK button in alert box than the box will disappear.
To make the alert box more effective we can also add more buttons like one for YES and another for NO or we can provide more than one messages as well as we can link one alert box to another alert box by connecting the button between two boxes. The messages can be more decorated by providing background color and other animation effects.
Note: To create a custom alert box we can also use the SweetAlert Library file which provides a CDN file to enable the Swal.fire() method.
- How to create custom Alert Dialogs in an Android App using Kotlin?
- How to add custom view in alert dialog?