Question

我有一个警告，它显示在导航栏中。我想要的是实现一种效果，其中警报到达导航栏的左侧，当我关闭时，而不是淡出，只是从右侧消失。

我不知道这是否是引导程序可以通过css框架提供的效果。

这是我目前的代码

html：

<div id="msgbox_success" class="alert alert-success alert-position hidden">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <spring:message code='msg.saved'/>
</div>

这里是我的js

function showMessageBoxSuccess() {
    console.log("Displaying msgbox_success");
    if ($("#msgbox_success").is(":visible")) {
        $("#msgbox_success").hide();
    }
    $("#msgbox_success").removeClass("hidden");
    $("#msgbox_success").show();
    $("#msgbox_success").delay(callbackAction.SUCCESS_TIMEOUT).fadeOut();
}

就像我说的我想要动画而不是使用show来显示左边的警报。当我点击关闭另一个动画而不是隐藏时，隐藏警报将其移动到右边。

问候。

Answer 1

有一个Bootstrap插件可以利用名为Bootstrap Notify（以前称Bootstrap Growl）的优势。另一个想法是Bootbox.js，但这是更多的模态驱动。希望这会有所帮助。

Answer 2

我想再试一次。我设置了一个 JSFiddle 示例，我认为该示例与您想要的类似。它有JS和CSS可以完成工作。在示例中，我有一个按钮，触发警报从左侧进入。然后，单击警报中的关闭按钮将在屏幕右侧发送警报。

$("#theButton").click(function(){
    $("#msgbox_success").removeClass("hidden").attr("aria-hidden", false);
    $("#msgbox_success").animate({left: '75%'}, "slow");
}); 

$(".close").click(function(){
    $("#msgbox_success").animate({left: '150%'}, "slow");

    var adjustMsgBox = function(){
        $("#msgbox_success").addClass("hidden").attr("aria-hidden", true);
    };
    setTimeout(adjustMsgBox, 2000);
});

可能有更好的方法可以做到这一点，但我认为这将指向正确的方向。 messageContainer将是您的导航栏，因此请相应地调整CSS。希望这更像是你追求的目标。

从左侧，靠近右侧打开引导警报

2 个答案: