CODEWITHSUNDEEP
htmlcssalert
b0y
b0y

Reputation: 576

Bootstrap alert is disturbing DOM

I want to show a bootstrap alert on click of button. I have added the HTML code under the div of Container-Fluid

HTML

<div class="alert alert-success pull-right right fade">
          <strong>Alert!</strong> Here is my message..
        </div>

JS

            $("#saveChanges").on("click", function() {
    $(".alert").removeClass("in").show();
  $(".alert").delay(500).addClass("in").fadeOut(5000);
});

as a result: http://prntscr.com/9sum2y

I want it to come up and disappear and not disturb the whole page.

Upvotes: 0

Views: 122

Answers (2)

Nilesh Mahajan
Nilesh Mahajan

Reputation: 3516

Checkout the fiddle https://jsfiddle.net/nileshmahaja/p9u63v6c/3/

I have given position absolute to the alert div, so It should not disturb the structure and should not push other element to take it's place

HTML

<div class="container">
  <div class="alert alert-success fade">
    <strong>Alert!</strong> Here is my message..
  </div>
  <button class="btn btn-xs">Click me</button>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non odio ac neque laoreet tempor. Morbi luctus volutpat risus quis tempor. Pellentesque placerat massa ornare ligula tincidunt condimentum. Duis risus tortor, feugiat ut turpis ac, malesuada
    porta ex. Aenean eu suscipit nisi. Vestibulum risus urna, efficitur a dignissim et, tempus id massa. Sed in urna et dolor pulvinar fermentum. Quisque blandit eu turpis eget malesuada. Nullam rutrum id quam sed lacinia. Cras quis gravida sem. Curabitur
  </p>
</div>

css

.alert {
  position: absolute;
  display: none;
  left: 0;
  right: 0;
}

Upvotes: 1

John Roca
John Roca

Reputation: 1234

Remove the pull-right class in your alert and DIV so it would look like this:

<div class="alert alert-success pull-right right fade">
      <strong>Alert!</strong> Here is my message..
    </div>

I think it would do the trick!

Upvotes: 0

Related Questions