CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
DLev
DLev

Reputation: 123

Bootstrap Modal Backdrop only shows with "class=fade", not class="show"

I needed my modal window to show upon launching of my page, and I was able to find that solution elsewhere on this site (changing class="modal fade" to class="modal show").

However, upon doing that, the faded backdrop has disappeared. I've tried using the class "modal-backdrop" on the same div as "modal", but with the opacity set to .5, that makes both the backdrop AND the modal window transparent, which of course is undesirable. I'm not much with Javascript, so the problem could lie there.

Here's my code:

HTML:

   <div class="modal show"  tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-body">
                    <div>
                        <p style="font-size:17px;font-family: 'AntennaLight',  Arial, sans-serif;">Welcome to the <span style="font-family:'AntennaMedium',  Arial, sans-serif;">Lorem Ipsum</span> website.<br /> <br />
                        Please provide the ZIP code where you intend to register the vehicle and the intended date* you plan to purchase the vehicle.<br /> <br />
                        Thank you!<br /> <br />
                        </p>
                    </div>


                        <form id="msform" action='/Home/Submit' method="post">

                            <!-- fieldsets -->
                            <fieldset class="firstSet">

                                <p>
                                    <input type="text" name="zip" value="" placeholder="ZIP Code" />
                                </p>
                                <p>
                                    <input type="text" name="date" value="" placeholder="XX/XX/XXXX" />
                                </p>

                                <input name="submit" type="submit" class="submit action-button" value="Submit" />
                            </fieldset>
                        </form>

                  <div style="margin-top:30px;">

                    <p style="font-size:11px;font-family: 'AntennaLight',  Arial, sans-serif;">*If the sale date has already occurred, please use that date.</p>
                    </div>

                </div>
            </div>
        </div>
    </div>

JS:

  <script>
   $( document ).ready(function() {
    $('.modal')
    .prop('class', 'modal') // revert to default
    .addClass( $(this).data('direction') );
  };
 </script>

On other sites I've worked on, using class="modal fade" works great, when there's a button to fire the modal window... but in this case I need the window and backdrop to appear upon page launch, and simply changing it to class="modal show" only shows the window on launch, but no backdrop.

Thanks!

Upvotes: 2

Views: 7266

Answers (2)

Saa_keetin
Saa_keetin

Reputation: 655

You need to add a div tag with modal-backdrop fade in class after closing the div tag for modal to attain the backdrop look.

Also ensure you remove it with jquery on closing the modal. 

Example:

<!-- Modal -->
<div id="myModal" class="modal show" role="dialog">
</div> <!-- end of modal -->

<div class="modal-backdrop fade in"></div>

Codepen link:

http://codepen.io/saa93/pen/amNpyg

Upvotes: 0

Sergiu
Sergiu

Reputation: 1206

You can give the model an id and start it modal like this:

$( document ).ready(function() {
    $('#my-modal').modal('show')
})

This will keep the behavior that occurs when you trigger it manually using a button.

Upvotes: 4

Related Questions