0

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

使用关闭按钮记录消息

我已经尝试了 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>

4

1 回答 1

2

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

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

于 2016-10-07T19:44:03.460 回答