Need modification with jquery click function

Question

Here is something I am trying to do. I have created a jsfiddle so you can look and let me know how to do what I am looking for.

$(document).ready(function() {
  $('#trigger-button').click( function () {
      $('#trigger-box').toggle();
  });
});

http://jsfiddle.net/s2FzE/

It's working fine as far as code is concerned. Clicking on button triggers a box to appear and disappear. Works fine.

But what I want is if someone click button and box appear then the box can disappear by 2 methods.

clicking again on button or
click anywhere except box (clicking on page body) <-- this is where i need help.

First of all, get rid of the second argument/function passed to click. It makes no sense. After that, have a look at jQuery UI dialogs. They probably do what you want. There are also tons of similar libs to show modal dialog windows. — ThiefMaster
– ThiefMaster, Commented Jul 25, 2013 at 9:05
Thanks changed. Yes second argument was not doing anything since I am using toggle. :) but I still need a simplest way to do second part. I don't want to use a large library to accomplish that. — Robert hue
– Robert hue, Commented Jul 25, 2013 at 9:09
There are small ones, too. malsup.com/jquery/block for example. However, if you do not want modal behavior see adeneo's answer. — ThiefMaster
– ThiefMaster, Commented Jul 25, 2013 at 9:13

Dziad Borowy · Accepted Answer · 2013-07-25 09:51:55Z

2

here's my approach:

you need a document event listener to hide the box when user clicks anywhere. But the event listener is not necessary when box is hidden, so - it can be only added when box is shown, e.g.:

var box = $('#trigger-box'),
    showBox = function  (e) {
        if (!box.is(':visible')) {                      // only do that when box is hidden
            e.stopPropagation();                        // required to prevent document 
            box.show();
            $(document).on('click.showBox', hideBox);   // event namescope for easy removal
        }
    },

then - when the box is hiding - we can remove this event listener, like so:

var hideBox = function (e) {
    var target = $(e.target);
    if (target.is(box) || target.closest(box).length) return;  // don't close if clicked on box or on anything inside the box
    $(document).off('click.showBox');
    box.hide();
}

and then - we can just add the event listener:

 $('#trigger-button').on('click', showBox);

DEMO

edited Jul 25, 2013 at 9:51

answered Jul 25, 2013 at 9:12

Dziad Borowy

12.6k4 gold badges44 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

adeneo Over a year ago

I don't get it, you got two upvotes, but why would you add an event handler inside another event handler and then use off(), and for me it doesn't work at all, clicking the box, it dissapears, and clicking the button twice, it doesn't dissapear? Maybe I misunderstood the question !

Robert hue Over a year ago

looks interesting but clicking trigger button is calling show box event and it does not hide box on clicking again. is that right.

Dziad Borowy Over a year ago

@adeneo the event handler on document is added only when it's needed (when the box is visible), so it is not called every time you click on the page. The click-on-the-button-to-hide-box works now.

Robert hue Over a year ago

@tborychowski still not working, as suggested by adeneo, clicking box should not make it disappear.

Dziad Borowy Over a year ago

@Roberthue sorry, I missed that. It's fixed now.

adeneo · Accepted Answer · 2013-07-25 09:25:38Z

1

Listen for a click on the document level, and filter out any clicks on the button or box :

$(document).ready(function () {
    $('#trigger-button').click(function () {
        $('#trigger-box').toggle();
    });
    $(document).on('click', function(e) {
        if ( !$(e.target).closest('#trigger-box, #trigger-button').length ) 
             $('#trigger-box').hide();
    });
});

FIDDLE

edited Jul 25, 2013 at 9:25

answered Jul 25, 2013 at 9:10

adeneo

319k29 gold badges410 silver badges392 bronze badges

5 Comments

ThiefMaster Over a year ago

Instead of the e.target check you can simply add a click handler on the outermost element of the dialog and call e.stopPropagation() to prevent the event from reaching the handler you added to the document itself. That removes the need to check for each item inside the dialog separately.

adeneo Over a year ago

@ThiefMaster - yes, but the button and the box are siblings, so that means either stopping the propagation on both or on the containing element, #container, which sounds like an element that would contain more elements, and stopping the propagation on that could cause issues, so just checking the target seemed more appropriate.

ThiefMaster Over a year ago

Hm, why would you ever want to propagate a click event within a dialog to the outside world?

Robert hue Over a year ago

Yes, there will be other elements on page. usual html/css elements, forms and some custom javascript. And I don't want this to affect any other actions.

Robert hue Over a year ago

@adeneo can you expain what exactly are you checking with "if ( !$(e.target).closest('#trigger-box, #trigger-button').length )".

Collectives™ on Stack Overflow

Need modification with jquery click function

2 Answers 2

5 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related