Question

63

Fade in and out a Bootstrap 3 modal

rated 0 times [ 66] [ 3] / answers: 1 / hits: 67408 / 10 Years ago, wed, may 21, 2014, 12:00:00

I have given my Bootstrap 3 modal a 'fade' class but the modal doesn't 'fade' in and out as I expect it to. It seems to slide in from above, rather than fade in.

Modal:

<div class=modal fade id=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true>

  <div class=modal-dialog>

    <div class=modal-content>

      <div class=modal-header>

        <button type=button class=close data-dismiss=modal aria-hidden=true>&times;</button>

        <h4 class=modal-title id=myModalLabel>Modal title</h4>

      </div>

      <div class=modal-body>

        ...

      </div>

      <div class=modal-footer>

        <button type=button class=btn btn-default data-dismiss=modal>Close</button>

        <button type=button class=btn btn-primary>Save changes</button>

      </div>

    </div>

  </div>

</div>

Trigger button:

<button class=btn btn-primary btn-lg data-toggle=modal data-target=#myModal>

  Launch demo modal

</button>

To show an example of how I'd expect a 'fade' effect to look I've created this example: http://jsfiddle.net/spQp5/

How can I get my modal to 'fade' in and out like this?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

katia

Add To Favorites

Follow

Total Points: 570

Total Questions: 101

Total Answers: 85

Location: Saudi Arabia

Member since Sat, Aug 20, 2022

2 Years ago

answered 10 Years ago trayvon · Accepted Answer

Bootstrap modals fade in by default. Perhaps it is fading in too quickly for you to see? If you look at the css you can see they have transitions setup to make it fade in for .15 seconds:

.fade {

    opacity: 0;

    -webkit-transition: opacity .15s linear;

    transition: opacity .15s linear;

}

Changing the fade in to one second, for demonstration purposes, may show you that it is in fact fading in.

.fade {

    opacity: 0;

    -webkit-transition: opacity 1s linear;

    transition: opacity 1s linear;

}