javascript - Bootstrap modal bug after manual hide -

i trying make sure everytime show modal dialog, there no visible dialog. make this, i'm doing:

$('.modal').modal('hide'); 

but doing this, when show modal dialog with:

var dlg_opts = { show: true, keyboard: false, backdrop: 'static' }; 

if click on background (backdrop) or press escape, modal closes. when remove .modal('hide'), code works great , modal closes 'close' button.

there example of modal window:

<div class="modal fade" id="dlgwarning" tabindex="-1" role="dialog" aria-labelledby="dlgwarninglabel" 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="dlgwarninglabel"></h4>             </div>             <div class="modal-body">              </div>             <div class="modal-footer">                 <button type="button" class="btn btn-default" data-dismiss="modal">cancelar</button>                 <button type="button" class="btn btn-warning" id="btnwarningaccept"></button>             </div>         </div>     </div> </div> 

this code dialogs:

var dlg_opts = { show: true, keyboard: false, backdrop: 'static' };  function showmodal(id, width) {     closemodal();      id = '#' + id;     $(id).modal(dlg_opts);      if (arguments.length == 2) $(id).css('width', width + 'px'); }  function closemodal() {     $('.modal').modal('hide'); } 

anyone have idea be? lot!

edit:

here can test it: http://www.bootply.com/123369 if try this, see dialog closes esc/click on background. comment $('.modal').modal('hide') , code works great!

it's because reinit modal each time want call it...

so init modal first without show them.

bootply : http://www.bootply.com/123372

js :

var dlg_opts = { show: false, keyboard: false, backdrop: 'static' };  // <-- here $('.modal').modal(dlg_opts);                 // <-- here  function showmodal(id, width) {     closemodal();      id = '#' + id;     $(id).modal('show');       // <-- here      if (arguments.length == 2) $(id).css('width', width + 'px'); }  function closemodal() {     $('.modal').modal('hide'); }  $(document).ready(function(){   showmodal('dlgwarning'); }); 

html : same given