Modal not opening first time click.

[edu27]

Hi,
I'm having problems opening a modal.
The first time I click on the trigger (Calendar event), the modal is set off view, while the overlay is visible, but if you click a second time in a row the modal appears as it should.
Here is proof.

I've been looking at your code and adding some debug lines and I have found that the first time I click, the target is the Window (jQuery(window)) instead of the desired target, which is the calendar event, but when I click a second time in the same calendar event, the modal is placed correctly and printed the desired target.
Debug code added to dist/jBox.js line: 1164.

JS Console:
First click.

Second click.

Here is my code:

// jBox instance
let box = new jBox('Tooltip', {
    theme: 'TooltipBorder',
    trigger: 'click',
    width: 600,
    height: jQuery(window).height() - 160,
    adjustTracker: true,
    closeOnClick: 'body',
    closeOnEsc: true,
    animation: 'move',
    position: {
        x: 'right',
        y: 'center'
    },
    outside: 'x',
    overlay: true,
    overlayClass: 'overlayCalendar',
    content:
        'Scroll up and down or resize your browser, I will adjust my position!<br><br>Press [ESC] or click anywhere to close.',
});

// Fullcalendar instantiation
. . .
eventClick: function(calEvent, jsEvent, view) {
    box.attach('.elem-'+calEvent.event.extendedProps.myId).setTitle(calEvent.event.title).open();
},
. . .

And here is a workaround to make it work every time I click, but I don't know the consequences about this change in other parts of the library.

Change in your code dist/jBox.js:

Finally, I think this behaviour is related to this closed issue #144

Thanks for your time.
Edu.

[StephanWagner]

Is there a reason to attach the jBox after click?

eventClick: function(calEvent, jsEvent, view) {
    box.attach('.elem-'+calEvent.event.extendedProps.myId).setTitle(calEvent.event.title).open();
},

Normally, you would attach the jBox to a selector once it is initialized, e.g.:

let box = new jBox('Tooltip', {
    // ...
    attach: '.my-selector'
});

...then you could do all the logic about content in the onOpen method:

let box = new jBox('Tooltip', {
    // ...
    attach: '.my-selector',
    onOpen: function () {
      this.setTitle(this.source.attr('my-title-attr'));
    }
});

If you don't have the title and content available in the source element, you could do something like that:

let box = new jBox('Tooltip', {
    // ...
    attach: '.my-selector'
});

// ...
eventClick: function(calEvent, jsEvent, view) {
    box.setTitle(calEvent.event.title);
},

[edu27]

Hello Stephan, thanks for taking your time.

Is there a reason to attach the jBox after click?

eventClick: function(calEvent, jsEvent, view) {
    box.attach('.elem-'+calEvent.event.extendedProps.myId).setTitle(calEvent.event.title).open();
},

Answering your question, I want to display the modal beside the event clicked, that's why I'm attaching everytime I click.

[StephanWagner]

Theoretically that should also work when you attach it befoerhand. You only have to make sure the element exists when attaching. Otherwise you can always reattach with box.attach().

[edu27]

Even using attach on a existing element the first time and then reattaching when I click on the Fullcalendar event, target is not defined in this.option.target, therefore it uses jquery(window) for positioning.

You can see the behaviour is the same as seen in this gif I've sent yesterday:
https://user-images.githubusercontent.com/5015217/153889825-7921db22-b49c-4253-8aa0-8e170e218978.gif

For now I'm using a downloaded version with the workaround I wrote yesterday.

[redtopia]

For me, it was confusing to figure out how to configure a single window to be used for different content. The API is a little fuzzy when it comes to changing the content and window position based on which link/button is clicked. The way I do it on my pricing page is to attach the jBox to every link. See #184

Then the trick is to get the content that you want to render, which needs to be cloned otherwise jBox will eat it up.

[StephanWagner]

Best practice is to attach your jBox via the attach option. You then can manipulate content in many ways. One would be the onOpen method: https://jsfiddle.net/StephanWagner/6b7skjx9/

It gets a little tricky when the element that the jBox should attach to is loaded after jBox is initialized. Then you would just have to reattach it: https://jsfiddle.net/StephanWagner/ujoyf2hr/ (See JS line 34: myModal.attach();)

[redtopia]

Be careful when calling setContent() in your onOpen event callback if your content is a jquery element because jBox will move that element to the dialog's content element. The next time the dialog opens, your content will be removed from the DOM because it will be replaced with another element. As I mentioned in my comment above, you will need to clone your content so that it can be referenced again. Ideally, jBox would do the cloning imho. Perhaps an update could be made to the docs that speaks to this issue.