Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Modal Popup inside a Flip Box

Featured Lock Resolved Issue
Hey,
I wanted to have a modal popup inside a flix box: I have a flip box with a person picture, when you hover on it, you see a workshop that this person is giving. I wish I could click on the workshop and a modal popup will open up and the full description of the workshop will show up.
Is that possible?

Many thanks
Itamar

7 Answers

Toufiq - Staff

More than a month ago #Permalink
Hi there,

The modal doesn't work on the flip box addon. This feature doesn't include with Flip Box addon.

-Thanks

itamarj

More than a month ago #Permalink
Thanks Toufiq,
Is there any work around? Any creative way to create a popup menu on top of a flip box?

Toufiq - Staff

More than a month ago #Permalink
Thanks Toufiq,
Is there any work around? Any creative way to create a popup menu on top of a flip box?


Hi there, I have tried no success and already discuss with our team. They have told me it's not possible. Thanks

itamarj

More than a month ago #Permalink
ok, thank you.
So maybe I can just use the popup modal. I've use image for it, and there is a large "play" icon on top of the image. Is there a way to remove it? Can I add any hover effect on it?

Toufiq - Staff

More than a month ago #Permalink
Hi there, Please share the modal page url. Let me see. Thanks

Toufiq - Staff

More than a month ago #Permalink
https://queermagic.org.il/index.php/en/76-home-2


Hi there,

If you wanna decrease the font size or font icon, please follow the instruction.

Change icon
http://prntscr.com/kjovnf
http://prntscr.com/kjovec

Height - width & font size css code

.sppb-modal-selector.sppb-magnific-popup i {
height: 80px;
width: 80px;
background: #fff;
font-size: 30px;
line-height: 89px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}


Animation css code

.sppb-modal-selector.sppb-magnific-popup span.bubble-ripple {
position: absolute;
top: 0;
width: 125px;
height: 50px;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display: block;
background-color: rgba(0,0,0,0.8);
border-radius: 50%;
-webkit-animation: bubble-ripple 1.5s linear infinite;
-moz-animation: bubble-ripple 1.5s linear infinite;
-o-animation: bubble-ripple 1.5s linear infinite;
animation: bubble-ripple 1.5s linear infinite;
}


Note: I have told you total instructions. But, We are not allowed to provide customization support.

-Thanks


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 169
Sifat

Sifat

Total Accepted Answers: 117
Toufiq

Toufiq

Total Accepted Answers: 51
Pavel

Pavel

Total Accepted Answers: 3
M

Mike

Total Accepted Answers: 2

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us