Close Button project HTML, CSS & JS

KBConcepts · December 22, 2020, 7:34pm

I’m looking to make a close button (X icon) that dismisses any content (e.g., Alerts, Modals, Popovers). I’ve been missing around with this. Not sure how to apply to any content.

HTML (not sure why the Forum will not preview the html)

<br /><br />
<a class="fragment" href="">
    <div>
        <span id='close'>x</span>
    </div>
</a>

CSS
.fragment:hover {
box-shadow: 3px 3px 6px rgba(0,0,0,.2);

}

.fragment img {
float: left;
margin-right: 10px;
}

#close {
float:right;
display:inline-block;
padding:2px 5px;
background:#ccc;
}

#close:hover {
float:right;
display:inline-block;
padding:2px 5px;
background:#ccc;
color:#fff;
}

JavaScript
window.onload = function(){
document.getElementById(‘close’).onclick = function(){
this.parentNode.parentNode.parentNode
.removeChild(this.parentNode.parentNode);
return false;
};
};

pumpkin · December 22, 2020, 9:27pm

That’s what the </> symbol is for