How to add a close button to alertify log with CSS?


Tags: javascript,jquery,css,css3,alertify

Problem :

I'm trying to add this close button to my alertify log message. The final display should be something like this:

log message wit close button

I've tried a few solutions listed on SO but for some reason I'm not able to move the close button out of the alertify log message. The overflow for the close button is always hidden, and I've tried playing with the CSS settings but it is not working.

var fn = function() {
  alertify.log('How to add close button? <a href="" class="close-icon"></a>');
};

fn();
.close-icon
{
  position: absolute;
  top: -5px;
  right:-5px;
    display:block;
    box-sizing:border-box;
    width:20px;
    height:20px;
    border-width:3px;
    border-style: solid;
    border-color:black;
    border-radius:100%;
    background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%);
    background-color:black;
    box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}
<link href="https://rawgit.com/alertifyjs/alertify.js/master/dist/css/alertify.css" rel="stylesheet"/>
<script src="https://rawgit.com/alertifyjs/alertify.js/master/dist/js/alertify.js"></script>
<button onclick="fn();">
    <span class="ui-button-text">Test</span>
</button>



Solution :

The problem is that the content overflows out of the container and that content is hidden. An easy way to fix this is with:

.alertify-logs > div {
  overflow: visible;
}

var fn = function() {
  alertify.log('How to add close button? <a href="" class="close-icon"></a>');
};

fn();
.close-icon
{
  position: absolute;
  top: -5px;
  right:-5px;
    display:block;
    box-sizing:border-box;
    width:20px;
    height:20px;
    border-width:3px;
    border-style: solid;
    border-color:black;
    border-radius:100%;
    background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%);
    background-color:black;
    box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

.alertify-logs > div {
  overflow: visible;
}
<link href="https://rawgit.com/alertifyjs/alertify.js/master/dist/css/alertify.css" rel="stylesheet"/>
<script src="https://rawgit.com/alertifyjs/alertify.js/master/dist/js/alertify.js"></script>
<button onclick="fn();">
    <span class="ui-button-text">Test</span>
</button>


    CSS Howto..

    How can I make my Div box holder look like this inside with CSS?

    @media query device - how to portrait one css, landscape other?

    How to make div horizontally and vertically centered without scripting?

    How to show a title in the border of a div [duplicate]

    How to send an HTML file with css?

    How to draw a responsive shape [closed]

    css/javascript - How to achieve these unusual design requirements? [closed]

    How can i integrate php to html table

    Jquery hide / show div but to keep toggle link from “hiding” too

    How to make arc-in animation on a website - CSS or JavaScript?

    How to create a full width background image with a variable height depending on content?

    How to use background image in CSS?

    How to center image while also aligning text to the right of image?

    How to remove border (outline) around text/input boxes? (Chrome) [duplicate]

    How to change lines in an angularJS+Bootstrap?

    how to make smooth css transition

    How do I draw a Diagonal div?

    wordpress submenu css show on parent active and child active

    how to display tabs in more than one row having the extra tabs coming one row up rather than one row below?

    How to resize animated gif with HTML/CSS?

    AngularJS - how to set css class for the custom directive?

    How to Change Style of Parent
  • on Hover
  • How To Refer To CSS Background Image in Visual Studio?

    How to Prefix this Input element, using CSS

    How to change CSS pseudo-class element using JavaScript

    How to place text over different images with different positions?

    How to use css and images to create a rounded header section in an HTML page?

    how to align an element but keep the space it left reserved

    How to control number of items per row using media queries in Flexbox?

    CSS: How to align differently sized images in a line?