search

darklow / social-share-kit

Library of decent and good looking CSS/JavaScript social sharing icons, buttons and popups
http://socialsharekit.com
Other
398 stars 75 forks source link

Share Buttons Not Working Within Modal #70

Open codingwithchris opened 6 years ago

codingwithchris commented 6 years ago

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 commented 6 years ago

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

robsilva commented 6 years ago

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 commented 6 years ago

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