Modal Popup Inside Text - Question | JoomShaper

Modal Popup Inside Text

P

P.C.

SP Page Builder 3 months ago

Hi everyone, I need to insert a modal popup directly into the text, without creating interruptions: the ideal would be to be able to create a link or button in continuity with the text.

Example: text text text [text that opens popup modals] text text text.

Is it possible to do it?

Thank you for your support!

P.

1
4 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 months ago #147116

Hi PC,

with using Modal addon (SPPB by default) - not possible.

But check modal from bootstrap 5 and use it inside Raw HTML addon - then it may work.

Use HTML code from "Examples" area, it should work if your template uses Bootstrap. Remember to use custom JavaScript if needed. Now whole rest is on your hands. Although, I do not promise that it will be an easy task.

0
P
P.C.
Accepted Answer
3 months ago #147161

Yes, it is not so immediate due to my low level of competence.

It would be a good idea to be able to integrate the addons directly as a function of sp page builder.

It would have been useful to me on many occasions :-)

I tried copying the example code and pasting it into the raw html, but it doesn't work.

Is the problem javascript? Where should I insert the JavaScript?

Thanks Paul!

P.

0
J
J
Accepted Answer
1 month ago #153127

Looking for this feature also, has anyone found a good source code?

Thx J

0
J
J
Accepted Answer
1 month ago #153139

Was able to copy a Joomshaper Modal Buttons code on the same page and update the ID's to be unique, strip out the btn classes and then place code inline to create a link to the pop up.

Good luck

<!--the link place inline where ever in the body copy-->
<a id="sppb-modal-999-selector" class=" sppb-magnific-popup  " href="#sppb-modal-999" data-popup_type="inline" data-mainclass="mfp-no-margins mfp-with-zoom">PHIUS </a>

<!--MODAL placed somewhere after the copy-->
<div id="sppb-addon-wrapper-999" class="sppb-addon-wrapper  addon-root-modal">
<div id="sppb-addon-999" class="clearfix  ">
<div class="sppb-addon">
<div id="sppb-modal-999" class="mfp-hide white-popup-block">
<div class="modal-inner-block">
<p style="font-size: 13px;">Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
</div>
</div>
</div>
0