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 に答える