Search code examples
javascriptjquerycssalertify

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

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>