Make a custom alert

This is just a simple tuto explaining how to make a simple customed alert box like. Here is the final demo :

Alert box

There is a message, an alert, something. Repsonsive box.

This is a simple code on explaining how I made my custom alert. First off you will need to have a basic understanding of jQuery.

Step 1:

Import jQuery into your HTML file like so. Note that you don't have to use Google's version. You can use the link from the jQuery website if you want.

Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Step 2:

Create a HTML block element. Give it a class. You can add content in it if you want. You also will need to add a close button.

html

<div class="alert">
    <div class="inner">
        <h5>Alert box</h5>
        <button class="close">x</button>
    </div>
    <p>
        There is a message, an alert, something. Repsonsive box.
    </p>
</div>

The output is:

Alert box

There is a message, an alert, something. Repsonsive box.

Step 3:

Add JavaScript. We need a way to close/open the alert. For this example I will be using jQuery along with JavaScript aswell.

Javascript

$(function() {
    $("#close, #alrt").on("click", function() {
        $(".alert").slideToggle(500);
    });
});

So what this code is doing is saying that if #close is clicked, then it will toggle the alert window. Slide toggle is a jQuery built in function that gives us a cool sliding effect. You can read more about them here. The 500 means how long the animation will last in milliseconds. So 1000 is one second. jQuery has multiple animation functions so make sure to read up on them.

Alert box

There is a message, an alert, something. Repsonsive box.

Step 4:

So, now that we have the animation down and the JavaScript down. This is still hardly even an alert. So what we need to do is add some code to edit the alert on start. Here is what I mean:

css

.alert {
    display: none;
    width: 70vw;
    border-radius: 6px;
    border: 1px solid #007FFF;
    background-color: #eee;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
    position: fixed;
    top: 10vh;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    z-index: 60;
    overflow-y: hidden;
}

.inner {
    padding: 10px 0;
    background: #007FFF;
}

.inner h5 {
    font-size: 1em;
    display: inline-block;
    text-align: left;
    width: 80%;
    padding-left: 10px;
    color: #eee;
    text-shadow: 1px 1px rgba(0,0,0,0.5);
}

.alert p {
    padding: 10px 10px 20px 10px;
}

.close {
    display: inline-block;
    width: 8%;
    padding: 3px;
    border: none;
    outline: none;
    border-radius: 5px;
    color: #ddd;
    text-align: center;
    background-color: #D00;
    box-shadow: inset -1px 1px 5px #F99;
}

Now, the alert is hidden on start. However once you click a button, it will show up.

Alert box

There is a message, an alert, something. Repsonsive box.

Step 5:

Well that's about it. All you need to custom your own alert box with CSS. The CSS is up to you. Thanks for viewing my code!