Share Buttons Not Working Within Modal

[codingwithchris]

Demo Environment

url: http://staging.ilnetwork.flywheelsites.com/voices-project/ryan-hampton/
user: flywheel
pass: creativefuse

Action

Click the purple share button near the top

Expected Behavior

1. A lightbox opens on the page. I am using Lightcase.js for this purpose.

2. When I click any of the share buttons inside the modal, I expect the share functionality to run as intended and open in a new window with content populated.

3. I am loading in the JS library for Social Share Kit via a JS bundle in the footer and initializing it in this way:

SocialShareKit.init({ selector: '.c-share__group .c-share__icon', });

Experienced Behavior

1. When I click any of the share buttons, the lightbox is closing and the current page is simply reloaded. No sharing functionality fires. Additionally, no console errors are logged.

2. Testing the Social Share Kit buttons outside of the lightbox properly trigger the share functionality.

3. I attempted implementing a wait after page load, and also tried to fire off SocialShareKit.init() after the lightbox content finishes loading. It appears that everything is properly initialized and running as it should, right up until a share button is clicked.

[robsilva]

I am experiencing the same issue. Have you found a solution?

[robsilva]

I figured it out. You need to initialize it when the elements are visible.

$('.modal').on('shown.bs.modal', function (e) {
          // do your init here
});

[codingwithchris]

@robsilva Yep! That's exactly what I ended up doing...sorry for not posting the solution here!