KiRa KiRa - 1 month ago 4x
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

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.



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


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


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

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