无法使用JavaScript关闭模式窗口

Question

I have a modal window for deletion confirmation. Somehow I can't close this modal window. The following is how I coded. Does anyone have a clue what I did wrong?

 $('#delpkgdtlPrompt').on('show.bs.modal', function(event) { $('#AddPkgItm').modal('hide'); var button = $(event.relatedTarget); // Button that triggered the modal var pkgid = button.data('pkgid'); var pkgdtldesc = button.data('pkgdtldesc'); var dataString = 'pkgid=' + pkgid; alert(dataString); var modal = $(this); }) $(document).on("click", ".btncancel", function(e) { e.preventDefault() $('#delpkgdtlPrompt').modal('hide'); $('#AddPkgItm').modal('show'); }); 

 <div class="modal fade" id="delpkgdtlPrompt" tabindex="-1" role="dialog" aria-labelledby="delpkgdtlPromptLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span> </button> <h2 class="modal-title text-center" id="delpkgdtlPromptLabel">Delete confirmation</h2> </div> <form action="" method="post" enctype="multipart/form-data" class="form-horizontal" id="frmdelpkgdtl"> <div class="modal-body"> <div id="pkgdtldesc" name="pkgdtldesc"> <p>You are about to delete the record</p> </div> </div> <div class="modal-footer"> <div class="col-sm-offset-3 col-sm-9"> <button name="btncancel" id="btncancel" type="submit" class="btncancel btn btn-default"><i class="fa fa-undo"></i>&nbsp;Cancel</button> <button name="btndelpkgdtl" id="btndelpkgdtl" type="submit" class="clsdelpkgdtl btn btn-warning"><i class="fa fa-trash"></i>&nbsp;Delete</button> </div> </div> </form> </div> </div> </div> 

I'm pretty sure the cancel button's click event has been fired as the other modal window (AddPkgItm) is shown after the button is clicked. Just the confirmation does not go away.

Answer 1

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

should do it. See this plunker