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:

Answer 1

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

<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>

I have no value for href property in this button so I facing the issue.

Then I edit this button code like this

 <a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>

then issue get solved just an error because of no # in first one.

see if this will helpful to you.

Answer 2

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);
}

Answer 3

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'