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

I have an alert is it´s showed in the navbar. What I would like is achieve an effect where the alert arrive form the left of the navbar, and when I close, instead of fade out just disappear from the right.

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

I dont know if that´s an effect that bootstrap can provide by the css framework.

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

Here is my current code

这是我目前的代码

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

and here my js

在这里我的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();
}

Like I said I would like to have an animation instead use show, to show the alert from the left. And when I click in close another animation instead hide, to hide the alert moving it to the right.

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

Regards.

2 个解决方案

#1

I wanted to give this another shot. I setup a JSFiddle example that I think is similar to what you want. It has JS and CSS that will get the job done. In the example, I have a button that triggers the alert to come in from the left. Then, clicking the close button in the alert will send the alert offscreen to the right.

我想再拍一次。我设置了一个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);
});

There might be a better way to do this, but I think this will point you in the right direction. The messageContainer will be your navbar, so adjust CSS accordingly. Hope this is more of what you are after.

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

#2

There is a Bootstrap plugin that you could maybe take advantage of called Bootstrap Notify (formerly Bootstrap Growl). Another idea is Bootbox.js, but that is more modal driven. Hope this helps.

有一个Bootstrap插件,你可以利用它称为Bootstrap Notify(以前称Bootstrap Growl)。另一个想法是Bootbox.js,但这是更多的模态驱动。希望这可以帮助。