Another point of view to this question.
(I'm using the bootstrap.js version 3.3.6)
I mistaken initialize modal both by manually in javascript:
$('#myModal').modal({
keyboard: false
})
and by using
data-toggle="modal"
in this button like example below (shown in document)
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
so the result its create two instance of
<div class="modal-backdrop fade in"></div>
append to the body of my html when open the modal. This can be the cause when closing the modal by using function:
$('#myModal').modal('hide');
it remove only one backdrop instance (as show above) so the backdrop won't disappeared. But it did disappear if you use data-dismiss="modal"
add on html as show in bootstrap doc.
So the solution to my problem is to only initialize modal manually in javascript and not using data attribute, In this way I can both close the modal manually and by using data-dismiss="modal"
features.
Hope this will help if you encountered the same problem as me.