CODEWITHSUNDEEP
javascripthtmlcsssvgmodalpopup
KaizenDeep
KaizenDeep

Reputation: 1

How to create a SVG Modal pop-up without the use of <div> containers to hold the modal text

Here's my newbie situation, and i've gone through the solutions here but no luck so far. I've created a SVG with highlighted sections on mouseover, and would want those sections to open in a modal pop-up. I'm using the website template's modal code, and it all works correctly for only any one element in the SVG. This means i can't use it more than once because it disables all the mouseovers and linking of the other elements and/or their popups but only in relation to the SVG.

Now the reason for this is because of the div sections of the code. If i remove those, all the other sections in the SVG work again.

So is there anyway i can replace the div tags with another container, as it seems that these don't work well with SVGs.

The SVG is running here: https://crunchyfrogpro.com/test/adfinancial/index.php/our-company/professional-opportunities/professional-firm-alliance

The Code:

<a class="sppb-modal-selector sppb-magnific-popup" data-popup_type="inline" data-mainclass="mfp-no-margins mfp-with-zoom" href="#sppb-modal-101" id="sppb-modal-101-selector">
   <path
   style="opacity:0;fill:#d45242;fill-opacity:0.295547;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
   d="m 121.14963,25.314849 4.33969,-1.808204 6.50953,-2.531485 6.1479,-1.084922 h 6.50953 L 239.31,20.38 144.65,181.88 83.86,78.66 l 18.48432,-33.454913 2.89312,2.169844 3.61641,2.169844 3.97805,1.446563 4.33968,1.084922 L 121.13,52.36 Z"
   id="path2996"
   onmouseover="this.style.opacity=1"
   onmouseout="this.style.opacity=0" />
   <div id="sppb-addon-101" class="clearfix "><div id="sppb-modal-101" class="mfp-hide white-popup-block modal-text"><div class="modal-inner-block"><p><strong>TITLE</strong></p><p>MODAL TEXT HERE</p>
   </div></div></div></a>

Upvotes: 0

Views: 304

Answers (0)

Related Questions