1

I am using a modal for a small form but I am bumping into a problem

I want my background to be faded when opening it and also when the page is loaded with it already shown (in case of form errors)

<div class="modal {% if form.errors %}show{% endif %}" id="ApiModal" tabindex="-1" role="dialog" aria-hidden="true">

The modal will be shown, but the background is not faded anymore. Now when i user fade together with show in the class. 

<div class="modal {% if form.errors %}show fade{% endif %}" id="ApiModal" tabindex="-1" role="dialog" aria-hidden="true">

The modal is opened (page seems blocked) but it isn't shown anywhere

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
Hans de Jong
  • 2,030
  • 6
  • 35
  • 55
  • 1
    possible duplicate of [Launch Bootstrap Modal on page load](http://stackoverflow.com/questions/10233550/launch-bootstrap-modal-on-page-load) – Brandon Taylor Jan 20 '15 at 16:06
  • Already looked at that one. But as far as i tried the solutions it doesnt work – Hans de Jong Jan 20 '15 at 16:35
  • In your sample code, you are checking for errors on two different forms... do you have two different modal windows? or is that a typo? – Brandon Taylor Jan 20 '15 at 16:37
  • Oops thats a mistake in my post here. its not the case in my code. ill correct it – Hans de Jong Jan 20 '15 at 16:38
  • 1
    So, just to understand your last statement, if you set `class="show fade"` the modal window is **not** shown on page load? – Brandon Taylor Jan 20 '15 at 16:40
  • Well it is shown but hidden (i think) the page get locked like something hidden is in front. I tried changing the aria-hidden to false but yields the same result – Hans de Jong Jan 20 '15 at 16:42
  • 1
    Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/69236/discussion-between-brandon-and-hans-de-jong). – Brandon Taylor Jan 20 '15 at 16:43

1 Answers1

0

Solved with the Jquery:

<script type="text/javascript">
    $(function () {
        $('#ApiModal').modal('show');
    });
</script>

Seems this problem is not solvable with just bootstrap classes (not any of the other examples worked

Hans de Jong
  • 2,030
  • 6
  • 35
  • 55