Bootstrap modal opening on page load

Question

I got a page with a bootstrap modal on it  manual  http   getbootstrap com javascript  modals    I would like to have this modal open on page load  However this is not happening    lt  -- Modal -- gt   lt div class  modal fade  id  memberModal  tabindex  -1  role  dialog  aria-labelledby  memberModalLabel  aria-hidden  true  gt     lt div class  modal-dialog  gt       lt div class  modal-content  gt         lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt           lt h4 class  modal-title  id  memberModalLabel  gt Thank you for signing in  lt  h4 gt         lt  div gt         lt div class  modal-body  gt           lt p gt However the account provided is not known  lt BR gt          If you just got invited to the group  please wait for a day to have the database synchronized  lt  p gt            lt p gt You will now be shown the Demo site  lt  p gt         lt  div gt         lt div class  modal-footer  gt           lt button type  button  class  btn btn-primary  data-dismiss  modal  gt Close lt  button gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt    lt script type  text javascript  gt   lt  --     memberModal   modal  show      -- gt   lt  script gt    Now if I add a button to the code  The modal is opening when I press the button     lt button type  button  class  btn btn-primary btn-lg  data-toggle  modal  data-target   memberModal  gt    Launch modal  lt  button gt    I tried several things  but I can t get it to work that the modal opens itself on page load   I have both the js and css of bootstrap called in the html head    lt  -- Bootstrap - Latest compiled and minified CSS -- gt   lt link rel  stylesheet  type  text css  href    maxcdn bootstrapcdn com bootstrap 3 2 0 css bootstrap min css  gt    lt  -- Bootstrap - Latest compiled and minified JavaScript -- gt   lt script type  text javascript  src    ajax googleapis com ajax libs jquery 1 11 2 jquery min js  gt  lt  script gt   lt script type  text javascript  src    maxcdn bootstrapcdn com bootstrap 3 2 0 js bootstrap min js  gt  lt  script gt    What am I doing wrong

User · Answer

Use a document ready   event around your call     document  ready function               memberModal   modal  show           jsFiddle updated - http   jsfiddle net uvnggL8w 1

User · Answer

I found the problem  This code was placed in a separate file that was added with a php include   function  And this include was happening before the Bootstrap files were loaded  So the Bootstrap JS file was not loaded yet  causing this modal to not do anything   With the above code sample is nothing wrong and works as intended when placed in the body part of a html page    lt script type  text javascript  gt      memberModal   modal  show     lt  script gt

[twitter-bootstrap] Bootstrap modal opening on page load

Examples related to twitter-bootstrap

[twitter-bootstrap] Bootstrap modal opening on page load

Examples related to twitter-bootstrap

Examples related to modal-dialog

Examples related to bootstrap-modal