Page Title

How to make a custom alert

This is just a simple code explaining how to make a simple alert like so:

Test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer arcu enim, auctor eu suscipit eu, hendrerit ut dui. Curabitur nec tortor ut enim dapibus efficitur. Praesent tristique malesuada mattis. Morbi metus orci, consequat ornare congue et, placerat ut tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel aliquam sem, et pellentesque urna. Fusce vitae ipsum non mauris dapibus scelerisque. Curabitur in lorem tempor, lobortis tellus nec, tincidunt lacus. Aenean auctor enim quis justo posuere accumsan placerat eu turpis. Nullam dolor ligula, viverra at lobortis et, mattis non massa. Etiam eu sollicitudin massa. Phasellus fringilla diam ligula. Pellentesque semper vestibulum est, eu mattis ex egestas et. ipsum non mauris dapibus scelerisque. Curabitur in lorem tempor, lobortis tellus nec, tincidunt lacus. Aenean auctor enim quis justo posue.

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.

<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.

<button id="alrt">Alert</button>
<div class="alert">
    <h3 id="aTitle">Test</h3>
    <button id="close">X</button>
    <p id="dummy">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer arcu enim, auctor eu suscipit eu, hendrerit ut dui. Curabitur nec tortor ut enim dapibus efficitur. Praesent tristique malesuada mattis. Morbi metus orci, consequat ornare congue et, placerat ut tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel aliquam sem, et pellentesque urna. Fusce vitae ipsum non mauris dapibus scelerisque. Curabitur in lorem tempor, lobortis tellus nec, tincidunt lacus. Aenean auctor enim quis justo posuere accumsan placerat eu turpis. Nullam dolor ligula, viverra at lobortis et, mattis non massa. Etiam eu sollicitudin massa. Phasellus fringilla diam ligula. Pellentesque semper vestibulum est, eu mattis ex egestas et. ipsum non mauris dapibus scelerisque. Curabitur in lorem tempor, lobortis tellus nec, tincidunt lacus. Aenean auctor enim quis justo posue.
    </p>
</div>

The output is:

Test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer arcu enim, auctor eu suscipit eu, hendrerit ut dui. Curabitur nec tortor ut enim dapibus efficitur. Praesent tristique malesuada mattis. Morbi metus orci, consequat ornare congue et, placerat ut tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel aliquam sem, et pellentesque urna. Fusce vitae ipsum non mauris dapibus scelerisque. Curabitur in lorem tempor, lobortis tellus nec, tincidunt lacus. Aenean auctor enim quis justo posuere accumsan placerat eu turpis. Nullam dolor ligula, viverra at lobortis et, mattis non massa. Etiam eu sollicitudin massa. Phasellus fringilla diam ligula. Pellentesque semper vestibulum est, eu mattis ex egestas et. ipsum non mauris dapibus scelerisque. Curabitur in lorem tempor, lobortis tellus nec, tincidunt lacus. Aenean auctor enim quis justo posue.

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.

$(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.

Test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer arcu enim, auctor eu suscipit eu, hendrerit ut dui. Curabitur nec tortor ut enim dapibus efficitur. Praesent tristique malesuada mattis. Morbi metus orci, consequat ornare congue et, placerat ut tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel aliquam sem, et pellentesque urna. Fusce vitae ipsum non mauris dapibus scelerisque. Curabitur in lorem tempor, lobortis tellus nec, tincidunt lacus. Aenean auctor enim quis justo posuere accumsan placerat eu turpis. Nullam dolor ligula, viverra at lobortis et, mattis non massa. Etiam eu sollicitudin massa. Phasellus fringilla diam ligula. Pellentesque semper vestibulum est, eu mattis ex egestas et. ipsum non mauris dapibus scelerisque. Curabitur in lorem tempor, lobortis tellus nec, tincidunt lacus. Aenean auctor enim quis justo posue.

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:

.alert {
    display: none;
}

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

Test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer arcu enim, auctor eu suscipit eu, hendrerit ut dui. Curabitur nec tortor ut enim dapibus efficitur. Praesent tristique malesuada mattis. Morbi metus orci, consequat ornare congue et, placerat ut tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel aliquam sem, et pellentesque urna. Fusce vitae ipsum non mauris dapibus scelerisque. Curabitur in lorem tempor, lobortis tellus nec, tincidunt lacus. Aenean auctor enim quis justo posuere accumsan placerat eu turpis. Nullam dolor ligula, viverra at lobortis et, mattis non massa. Etiam eu sollicitudin massa. Phasellus fringilla diam ligula. Pellentesque semper vestibulum est, eu mattis ex egestas et. ipsum non mauris dapibus scelerisque. Curabitur in lorem tempor, lobortis tellus nec, tincidunt lacus. Aenean auctor enim quis justo posue.

Step 5:

Well that's about it. All you need to do is add CSS. The CSS is up to you. Thanks for viewing my code!

How to create a custom alert for Uni