KiRa KiRa - 2 months ago 17
HTML Question

BootStrap Alert

I have this JSFIDDLE sample of my alert in click event button. I manage to search code that after the event the alert will be fade out. What I want to do now is the

div
of my button will not be affected
before and after
the click event. What I mean in affected is


  1. before click - the button must have a space for the alert to be view

  2. after click - the button must not move upward after the alert fade.



I hope you guys understand it.

Newbie here in bootstrap.

CODE

CSHTML

< div class="alert alert-success" id="success-alert" style="width:auto">
<strong>Success! </strong >
< /div >

< div class="modal-footer" >
<button type="button" class="btn btn-primary" id="btnAlert">
Alert</button >
< /div >


JS

$("#success-alert").hide();
$("#btnAlert").click(function () {
$("#success-alert").fadeTo(5000, 500).slideUp(500, function () {
$("#success-alert").slideUp(500);
});
});

Answer

Try this: The reason the space above keeps disappearing is that there's no element to consume that space so the button moves upwards.So here I just set the opacity of the html above the button to zero. JSFIDDLE

 $("#success-alert").css("opacity","0");
    $("#btnAlert").click(function () {
            $("#success-alert").css("opacity","1");
        $("#success-alert").fadeTo(5000, 500,function(){
         $("#success-alert").css("opacity","0");
        });       
    });