close bootstrap confirmation when clicking anywhere outside of it

Question

I am using the bootstrap confirmation plugin. I am attempting to close all confirmations if a click occurs anywhere outside of the confirmation. unfornately it is closing all the time on any click.

$('html').on('mouseup', function(e) {
  if ($(e.target).closest("[data-toggle='confirmation']").length === 0) {
    $("[data-toggle='confirmation']").confirmation('hide');
  }

here is the fiddle http://jsfiddle.net/zukdokpb/270/

Answer 1

You just need to target the button instead of html:

$("#mybutton").on('click', function(e) {
  if ($(e.target).closest("[data-toggle='confirmation']").length === 0) {
    $("[data-toggle='confirmation']").confirmation('hide');
  }

});

http://jsfiddle.net/zukdokpb/271/

It should do it for you if you use the data-popoutattribute (new fiddle) I see that you did that on the first button but not on the second. Adding it should fix the default functionality. Then $(e.target).closest("[data-toggle='confirmation']").length returns 0 unless you actually click on the original buttons, so it was hiding the popup on all other clicks.

html:

<a href="#Delete" class="btn btn-primary btn-large" title="Deseja realmente excluir o projeto?" data-toggle="confirmation" data-singleton="true" data-placement="top" data-popout="true"><span title="Excluir o projeto">Excluir</span></a>

<button type="button" class="btn" ng-show="patient.Archived" data-toggle="confirmation" data-singleton="true" data-popout="true">
  Archived
</button>

js:

$('[data-toggle="confirmation"]').confirmation({
    btnOkLabel: " Sim",
    btnCancelLabel: " Não"
});