HTML & JavaScript - Bootstrap

Question

I am trying to make a home page with the Bootstrap CMS. I currently have everything working apart from when the user comes onto the website I want a Modal to appear as soon as they go onto the website.

The current code I have for the Modal is:

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

Now, this is all fine,

The JavaScript:

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

As you should know with them together should make the Modal appear automaticlly but it's not.

Can anyone help?

Do you have FireBug (for Firefox) or the Chrome console up? Check to see if you're getting any Javascript errors. — GSP
– GSP, Commented May 4, 2014 at 13:38

ExpoCode Tech · Accepted Answer · 2014-05-04 13:39:10Z

1

Do not use $(window).load(...), instead you need to use:

$(document).ready(function(){
   $('#myModal').modal('show');
});

And be sure you have load jQuery api in your index.html.

I hope this will help you!

answered May 4, 2014 at 13:39

ExpoCode Tech

313 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Samuraik · Accepted Answer · 2014-05-04 14:09:30Z

0

You have 2 choices here.

1. When the page is loaded

function init() {
    $('modal_selector').modal();
}

window.onload = init;

2. When the document is ready.

function handleReady() {
    $('modal_selector').modal();
}

$(document).ready(handleReady);

answered May 4, 2014 at 14:09

Samuraik

794 bronze badges

Collectives™ on Stack Overflow

HTML & JavaScript - Bootstrap

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related