Popup with exclusive set not working correctly

[minifiredragon]

Help Wanted

Setting the exclusive flag does not always work,

Testcase

I want to make sure I am using the settings correclty

$(document).on('contextmenu', '.image', function()
		{			
			$(this).popup(
			{
				popup : $('.custom.popup'),
				on: 'manual',
				exclusive: true, //also used 'true'
				position: 'bottom center',
			});

			$(this).popup('show');
			return false;
		});

[lubber-de]

The code seems correct. Could you please share a jsfiddle to reproduce the situation where this does not work for you? Thanks

[minifiredragon]

Here is a jsfiddle: https://jsfiddle.net/s3qu9dxb/2/

The only thing I did not include are the actual images. The result is the same as what I get. Right click away on the images. Pop ups do not auto close.

[minifiredragon]

Forgot to save the last version:
https://jsfiddle.net/s3qu9dxb/3/

[ko2in]

@minifiredragon, if you would like to close the popup again with right click not over the image, you will need to bind contextmenu event to DOM and close the popup there. I don't think the popup plugin listing on contextmenu event by default.

Here's the modified version of your fiddle (https://jsfiddle.net/e3aLyz4g/).

[minifiredragon]

@ko2in That version still does the same thing. Right click on a picture in the 4th column. Now right click on another picture. Do it randomly and they still stay open. Some do not even close and reopen, but stack when you right click on the same image. If I right click and then click somewhere the popup closes (does that on mine as well).

What I am trying to do is have one popup close before the next opens. But something somewhere is preventing the popup from being closed. I have even tried straight jquery to force close all popups but they remain open. I even console tested that there was a popup to be closed before telling it to close.

[ko2in]

@minifiredragon , here's another fiddle (https://jsfiddle.net/Ldvju4c1/) that I created with fresh HTML.

Click the button, it'll alert the text. Try right click on the button, it'll display the popup for corresponding button.

Right click will close the current opening popups. Right click on anywhere on the page will do the same. If exclusive flag is set as false, the visible popups won't close. So, I guess this is working as expected.

Some of your JS might produce this incorrect behavior. Or you might not have proper HTML rendering. According to your original fiddle, you're generating the DOM for the popup via JS.

[minifiredragon]

@ko2in It is interesting how your method, which adds the pop up on demand works but the version where it is already coded in the page does not. I will try to apply this to what I have, as the popup is suppose to have a menu specific to each image.

I did a small test where I replaced your divs with a table and your version continued to work. I will update you after I reimplement your version with that I have. I will note, I did not have problems testing buttons, it was when I got to the complexity of what I posted that issues began to crop up.

[minifiredragon]

@ko2in I implemented your version onto what I had, and thus far it works. I just would like to understand better why/what makes the way you structured the code different then what I did.

[ko2in]

@minifiredragon , you're not binding the popup to the corresponding DOM node. Check this fiddle (https://jsfiddle.net/hyxtv09j/). This is exactly as your source code except the image URL. The image s are from Fomantic UI website. Thanks Fomantic UI guys.

These lines will give you a hint why your source codes didn't work.

$j(document).on('contextmenu', '.image', function() {
    var popup = $j(this).parent().find('.custom.popup');
    $j(this).popup({
      popup: $j(popup),
      on: 'manual',
      exclusive: true,
      position: 'bottom center',
    });

    $j(this).popup('show');
    return false;
  });

[minifiredragon]

@ko2in I see now. Thank you very much, helps in future troubleshooting with similar problems that may occur.