Bootstrap Modal immediately disappearing

Question

I m working on a website using bootstrap   Basically  I wanted to use a modal in the home page  summoned by the button in the Hero Unit   Button code    lt button type  button       class  btn btn-warning btn-large       data-toggle  modal      data-target   myModal  gt Open Modal lt  button gt    Modal code     lt div class  modal hide fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt     lt div class  modal-header  gt       lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt       lt h3 id  myModalLabel  gt In Costruzione lt  h3 gt     lt  div gt     lt div class  modal-body  gt       lt p gt Test Modal  Bootstrap lt  p gt     lt  div gt     lt div class  modal-footer  gt       lt button class  btn  data-dismiss  modal  aria-hidden  true  gt Chiudi lt  button gt       lt button class  btn btn-warning  gt Salva lt  button gt     lt  div gt   lt  div gt    The problem is that as soon as I click on the button  the modal fades in and then immediately disappears   I d appreciate any help    Also  how to change the dropdown triangle s color  pointing up  no hover   I m working on a website based on orange and brown and that blue thing is really annoying

User · Answer

I had the same issue because I was toggling my modal twice as shown below:

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

I removed one occurrence of:

$('#myErrorModal').modal('toggle')

and it worked like magic!

User · Answer

I came across this issue myself today and it happened to be only in Chrome  What made me realise it might be a rendering issue  Moving the specific modal to it s own rendering layer solved it    myModal     -webkit-transform  translate3d 0  0  0

User · Answer

Yet another cause solution  I had in my JS code       show survey   click function           survey modal   modal  show        But my HTML code was already written as    lt a class  small-text link  data-target   survey modal  data-toggle  modal  href     id  show survey  gt Take a quick 7 question survey  lt  a gt    So this is another permutation of how duplication entered the code and caused the modal to open then close  In my case  data-target and data-toggle in html as per Bootstrap docs already trigger the modal to work  The JS code is therefore redundant  and when removed  it works

User · Answer

Same symptom  in the context of a Rails application with Bootstrap provided by the bootstrap-sass gem  and  merv s answer put me on the right track   My application js file had the following       require bootstrap     require bootstrap-sprockets   The fix was to remove one of the two lines  Indeed  the gem s readme warns you about this error  My bad

User · Answer

I know this is old  but here s another thing to check for - make sure you only have one data-target  attribute   I had duplicated it and the result was as per this thread

User · Answer

Had to face the same issue  The reason is same as the  merv  Issue was with a calendar component added to the page The component itself add the modal feature to be used in the calendar popup   So the reasons to break model popup will be one or more of the following   Loading more than one bootstrap js versions files  minified      Adding an external calendar to the page where bootstrap is used Adding custom alert or popup library to the page Any other library which adds popup behavior

User · Answer

while working with Angular 5    i face the same issue   but in my case i solved as follows   component html   lt button type  button  class  btn btn-primary   data-target   myModal    click   showresult    gt fff lt  button gt    lt div class  modal  id  myModal  role  dialog   tabindex  -1  data-backdrop  false  gt       lt div class  modal-dialog  role  document  gt         lt div class  modal-content  gt           lt div class  modal-header  gt             lt h5 class  modal-title  gt Modal title lt  h5 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  div gt           lt div class  modal-body  gt             lt p gt Modal body text goes here  lt  p gt           lt  div gt           lt div class  modal-footer  gt             lt button type  button  class  btn btn-primary  gt Save changes lt  button gt             lt button type  button  class  btn btn-secondary  data-dismiss  modal  gt Close lt  button gt           lt  div gt         lt  div gt       lt  div gt     lt  div gt    component ts  NOTE  need to import jquery in ts file as  declare var    any      showresult        debugger         myModal   modal  show          Changes i made     removed  data-toggle  modal  from Button tag  thanks to  miCRoSCoPiC eaRthLinG this answer helps me here  in my case its showing modal so i created  click   showresult    inside component ts need to declare Jquery    and inside button click method showresult   call       myModal   modal  show

User · Answer

In my case I have use actionlink button in MVC and I have facing this issue  I have tried many solutions above and other  but still facing that issue  then I realize my error in code   I have called modal in javascript by using        ModalId   modal  show      Before the error I using this button   lt a href    onclick  return Edit     class  btn btn-primary  gt Edit lt  a gt    I have no value for href property in this button so I facing the issue   Then I edit this button code like this    lt a href     onclick  return Edit     class  btn btn-primary  gt Edit lt  a gt    then issue get solved just an error because of no   in first one   see if this will helpful to you

User · Answer

in case anyone using codeigniter 3 bootstrap with datatable   below is my fix in config ci boostrap php     assets dist frontend lib min js     lib min js has conflict with datatables js and i removed it replace with jquery js  assets dist frontend jquery-3 3 1 min js    assets dist frontend app min js    assets dist datatables js

User · Answer

I looked for a while for a duplicate bootstrap reference in my mvc app  after the other helpful answers on this question   Finally found it - it was included in another library I was using  so wasn t obvious at all   datatables net    If you still get this problem  look for other libraries that might be including bootstrap for you    datatables net allows you to specify a download with or without bootstrap - others do the same    So I removed the bootstrap min js from my bundle config and all worked fine

User · Answer

I too had the same issue  but for me it was happening because I had a button with type  submit  within the modal form  I changed       lt input  type  submit  name  submitname  id  partyBtn  value  Submit  title  Click to submit    gt    to       lt input  type  button  name  submitname  id  partyBtn  value  Submit  title  Click to submit    gt    And that fixed the disappearance issue

User · Answer

I had the same problem but it had a different cause  I followed the documentation and created a button like so    lt button class  btn btn-primary btn-lg  data-toggle  modal  data-target   myModal  gt    Launch demo modal  lt  button gt    When I clicked it  it appeared that nothing would happen  However  the button was in a  lt form gt  that was temporarily just fetching the same page   I fixed this by adding type  button  to the button element  so that it wouldn t submit the form when clicked

User · Answer

I was facing the same problem during testing on mobile devices and this trick worked for me   lt a type  submit  class  btn btn-primary  data-toggle  modal  href   myModal  gt Submit lt  a gt     Change the button to anchor tag it should work  the problem occurs due to its type button as it is trying to submit so the modal disappears immediately and also remove hide from modal hide fade give   lt div class  modal fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt  Hope this would work for you

User · Answer

In my case  a click on a button causes a  not wanted  reload of the page   Here is my fix    lt button class  btn btn-success  onclick  javascript  return false    data-target   modalID  data-toggle  modal  gt deaktivieren lt  button gt

User · Answer

In my case  I had only a single bootstrap js  jquery js file included but still getting such type of error  and my code for button was something like this    lt script type  text javascript  gt    document  ready function           bttn  lt  php echo  rnt  id     gt    click function              myModal  lt  php echo  rnt  id     gt    modal  show                lt  script gt    I simple added e preventDefault    to it and it worked like charm   So  my new code was like below    lt script type  text javascript  gt    document  ready function      e preventDefault          bttn  lt  php echo  rnt  id     gt    click function             myModal  lt  php echo  rnt  id     gt    modal  show               lt  script gt

User · Answer

I had added bootstrap to my project via bower  then I imported the bootstrap min js file and after the modal js file   The button that opens the modal is inside a form   I just remove the import for modal js and it works for me

User · Answer

A Likely Cause  This is typical behavior for when the JavaScript for the Modal plugin gets loaded twice   Please check to make sure that the plugin isn t getting double loaded   Depending on the platform you are using  the modal code could be loaded from a number a sources   Some of the common ones are    bootstrap js  the full BootStrap JS suite  bootstrap min js  same as above  just minified  bootstrap-modal js  the standalone plugin  a dependency loader  e g   require  bootstrap     Debugging Tips  A good place to start is to inspect the registered click event listeners using the developer tools in your browser   Chrome  for instance  will list the JS source file where the code to register the listener can be found   Another option is to try searching the sources on the page for a phrase found in the Modal code  e g   var Modal   Unfortunately  these won t always find things in all cases  Inspecting the network requests can be a little more robust at giving you a picture of everything loaded on a page   A  Broken  Demo  Here s a demo of what happens when you load both the bootstrap js and bootstrap-modal js  just to confirm your experience    Plunker  If you scroll down to the bottom of the source on that page  you can remove or comment out the  lt script gt  line for the bootstrap-modal js and then verify that now the modal will function as expected

User · Answer

In my case  I had the CDN included in the head of application html erb and also installed the  jquery-rails  gem  which I am guessing thanks to the documentation and posts above  is redundant   I simply commented out the CDN  below  from the head of application html erb and the modal appropriately stays open    lt  -- lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 4 js bootstrap min js  gt  lt  script gt -- gt

User · Answer

I ran into the same symptom that  gpasse showed in his example  Here was my code      lt form    gt     lt  -- various inputs with form submit --- gt      lt  -- button opens modal to show dynamic info -- gt     lt button id  myButton  class  btn btn-primary  gt Show Modal lt  button gt   lt  form gt    lt div id  myModal  class  modal fade      gt   lt  div gt    lt script gt         myButton    click  function              myModal    modal           lt  script gt    As  Bhargav suggested  my issue was due to the button attempting to submit the form  and reloading the page  I changed the button to an  lt a gt  link as follows    lt a href     id  myButton  class  btn btn-primary  gt Show Modal lt  a gt       and it fixed the problem   NOTE  I don t have enough reputation to simply add a comment or upvote yet  and I felt that I could add a little clarification

User · Answer

I had the same problem working on a project with asp NET  I was using bootstrap 3 1 0 solved it downgrading to Bootstrap 2 3 2

User · Answer

e preventDefault     with jquery ui  For me this problem occured with the click method override on a jquery ui button  causing a page reload on click by default

User · Answer

Have you tried removing  data-dismiss  modal

User · Answer

For me what worked was to remove   data-toggle  modal    from the button  The button itself can be any element - a link  div  button etc

User · Answer

The problem can also occurs if using jquery you attach an event listener twice  For exemple you would set without unbinding                   body   on  click    fixerror  function event                       fixerrormodal   modal  toggle                    If this happens the event is fired twice in a row and the modal disapears                  body   on  click    fixerror  function event                       fixerrormodal   modal                       fixerrormodal   modal  toggle                    See exemple   http   embed plnkr co i5xB1WbX7zgXrbDMhNAW preview

User · Answer

I too had the issue  if the button is inside a  tag then the modal appears once and disappears soon enough  taking the button out of the form fixed the isue  Thanks I ended up in this thread   1 to all

User · Answer

I had the same issue too  The problem with me was I was displaying the modal on pressing a  link and prompting for confirmation with jquery   The code below displayed the modal and which dissapeared immediately    lt a href    onclick  do some stuff    gt Hey lt  a gt    I ended up adding     to href so the link won t go anywhere and it solved my problem    lt a href     onclick  do some stuff    gt Hey lt  a gt

User · Answer

My code somehow had the bootstrap min js included twice  I removed one of them and everything works fine now

[twitter-bootstrap] Bootstrap Modal immediately disappearing

Examples related to twitter-bootstrap

[twitter-bootstrap] Bootstrap Modal immediately disappearing

Examples related to twitter-bootstrap

Examples related to modal-dialog