如何添加关闭按钮以使用CSS提醒日志？

Question

我正在尝试将此关闭按钮添加到我的alertify日志消息中 。 最终显示应该是这样的：

我尝试了SO上列出的一些解决方案，但是由于某些原因，我无法将关闭按钮移出alertify log消息。 关闭按钮的溢出始终处于隐藏状态，并且我尝试使用CSS设置进行播放，但是它不起作用。

 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> 

Answer 1

问题是内容从容器溢出，并且内容被隐藏。 解决此问题的一种简单方法是：

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