0

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/

Bryan Dellinger
  • 4,724
  • 7
  • 33
  • 79

1 Answers1

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: "&nbsp;Sim",
    btnCancelLabel: "&nbsp;Não"
});
meanjean
  • 301
  • 2
  • 6
  • that does not work if you click on either button a confirmation pops up if you click away from the button/s the confirmation does not dismiss. why are you using ID? there are mulitple confirmations with different IDs. and one is a button and one is a link – Bryan Dellinger 30 secs ago edit – Bryan Dellinger Dec 01 '17 at 19:18
  • It works for me? In the fiddle you would still need to click inside the html of the "results" area which would only be above and around the popover - clicking below it is basically another document in the context of this fiddle. I forgot about the other button but you could use a common class the same way. But I updated my answer with a different solution. – meanjean Dec 01 '17 at 20:06