How can I make the shadowbox responsive?

Marnee Beck

Hi,



I've created the shadowbox using the Blackbaud kit. Is there a way to make it mobile friendly? Please respond as soon as possible so that I can get this fixed.



Thanks!

Marnee

Daniel Hartanto

Hi Marnee,



I would suggest you use the following library



http://dimsemenov.com/plugins/magnific-popup/



That has been the most useful / well rounded library pertinent to generating a responsive shadowbox / modal popup I have ever used when "responsiveness" is required (from iframe, rendering videos, inline divs -- you name it). Library itself is a free and very easy / straightforward to implement (provided you are familiar with JS (and CSS))



You can check our actual implementation of that popup for example here:



http://tour.diabetes.org/site/PageServer?pagename=TC_homepage -- I am using this to display the "find your nearby event widget" on this one. (if you click on the "Register" on that homepage, or if you just initiate a search from that search bar, the popup will subsequently open)



or if you register (free registration on this following event below) upon successful registration you'll be brought to your Participant center within, you'll see the use of that responsive modal popup in different use cases (playing embedded videos, showing your 'receipt of registration' upon initial 1st visit after registration, detecting your device to offer mobile app promo link if you are on your mobile (iOS or Android) ). link is here:



http://stepout.diabetes.org



hope it helps,



regards

Daniel