Simple Responsive Closable Alert Boxes

In this article I am going to share with you simple responsive closable alert boxes.

These alert boxes are responsive and have close button to close them you can use these alert boxes inside your articles.

These alert boxes will make your site look amazing.

Demo/Preview of Simple Responsive Closable Alert Boxes:

View Demo

How are you buddy today we are going to invent Simple Responsive Closable Alert Boxes

As you know the HTML markup is mandatory for that so we should have some HTML markup first. Below is the HTML markup.

The HTML, CSS & Javascript code that are provided below can have some encoding errors so i recommend you to used codes from project files only if there is any error with the working of code.

HTML markup for Simple Responsive Closable Alert Boxes :

<div class="alert warning">
<span class='alert-close' onclick="this.parentElement.style.display='none';">×</span>
<b>Warning</b>

<ul>
<li><code class='mark'>  <span class="closebtn"
onclick="this.parentElement.style.display='none';">&times;</span></code>Before stepping into the tutorial, make sure you have backup the template first.</li>
<li>Before stepping into the tutorial, make sure you have backup the template first.Before stepping into the tutorial, make sure you have backup the template first.</li>
</ul>
</div>

<div class="alert info">
<span class='alert-close' onclick="this.parentElement.style.display='none';">×</span><b>Warning</b>

<ul>
<li>Before stepping into the tutorial, make sure you have backup the template first.</li>
<li>Before stepping into the tutorial, make sure you have backup the template first.
Before stepping into the tutorial, make sure you have backup the template first.</li>
</ul>
</div>

<div class="alert success">
<span class='alert-close' onclick="this.parentElement.style.display='none';">×</span><b>Warning</b>

<ul>
<li>Before stepping into the tutorial, make sure you have backup the template first.</li>
<li>Before stepping into the tutorial, make sure you have backup the template first.
Before stepping into the tutorial, make sure you have backup the template first.</li>
</ul>
</div>

<div class="alert tip">
<span class='alert-close' onclick="this.parentElement.style.display='none';">×</span><b>Warning</b>

<ul>
<li>Before stepping into the tutorial, make sure you have backup the template first.</li>
<li>Before stepping into the tutorial, make sure you have backup the template first.
Before stepping into the tutorial, make sure you have backup the template first.</li>
</ul>
</div>
<script>
// Get all elements with class="closebtn"
var close = document.getElementsByClassName("alert-close");
var i;

// Loop through all close buttons
for (i = 0; i < close.length; i++) {
    // When someone clicks on a close button
    close[i].onclick = function(){

        // Get the parent of <span class="closebtn"> (<div class="alert">
)
        var div = this.parentElement;

        // Set the opacity of div to 0 (transparent)
        div.style.opacity = "0";

        // Hide the div after 600ms (the same amount of milliseconds it takes to fade out)
        setTimeout(function(){ div.style.display = "none"; }, 600);
    }
}
</script>

Attribute	Belongs to	Description
charset	<meta>, <script>	Specifies the character encoding
class	Global Attributes	Specifies one or more classnames for an element (refers to a class in a style sheet)
href	<a>, <area>, <base>, <link>	Specifies the URL of the page the link goes to
onclick	All visible elements.	Script to be run when the element is being clicked
rel	<a>, <area>, <link>	Specifies the relationship between the current document and the linked document

There are different styles of these alert boxes use that you like.
Without CSS our this script (Simple Responsive Closable Alert Boxes) will never look pleasing. So here we are, our HTML markup is ready now we have to personalize our HTML markup and it can only be done using CSS.

So this is the CSS code which i have written and we will use this to customize Simple Responsive Closable Alert Boxes you can copy it by clicking on the code and code will be automatically copied to clipboard.

CSS Code for Simple Responsive Closable Alert Boxes :

.alert{font-family: -apple-system,BlinkMacSystemFont,'Roboto','Segoe UI','Oxygen-Sans','Ubuntu','Cantarell','Helvetica Neue',sans-serif;
    min-height: 38px;
    padding: 12px 15px 15px;
    margin: 5px auto;
    border-radius: 4px;
    border-left: 4px solid;
 opacity:1;
 transition: opacity 0.6s;
 max-width:90%;
}
.warning {
    background: rgba(244, 215, 201, .37);
    color: #d93025;
    border-color: #d93025;
}
.info {
    background: rgba(186, 208, 228, .37);
    color: #00539f;
    border-color: #00539f;
}
.success {
    background: #edf7ee;
    color: #4CAF50;
    border-color: #4CAF50;
}
.tip {
    background: #fff5e6;
    color: #ff9800;
    border-color: #ff9800;
}
.alert-close{
    padding-left: 15px;
    font-weight: bold;
    float: right;
    font-size: 20px;
    line-height: 18px;
    cursor: pointer;
    transition:.30s all;
}
.alert-close:hover{
 color:#000;
}
.alert code, .alert .mark{
    background: #fff;
    opacity: 0.9;
    padding: 3px 5px;
    border-radius: 4px;
    font-family: Consolas,Monaco,'Andale Mono',monospace;
    font-size: 89%;
    font-weight: normal;
 user-select: all;
 font-style: italic;
}

Don't forget to change color schemes of your own choice.

These are some css selectors that are used in the above css code with their description and example.

Selector	Example	Example description
:hover	a:hover	Selects links on mouse over

Result :

So here we are, We have done and our project Simple Responsive Closable Alert Boxes is ready now you can copy and combine all the codes provided above into single html file and have fun.

If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

Download Project (Simple Responsive Closable Alert Boxes) File :

Simple Responsive Closable Alert Boxes.zip

File Size 1.62 KB

Click the download button and you will be redirected to download page from where you can download project files.

If you face any difficulty in downloading the project file leave you comment below i will resolve that issue as soon as possible.

So that's it stay updated to this blog and subscribe to the newsletters that's free do it now to get notifications of my upcoming posts.
Thank you !

source:softwebtuts.com

A4F

Simple Responsive Closable Alert Boxes