He estado tratando de implementar el modal bootstrap4 en mi proyecto y quiero usar el modal bootstrap4 en el mapa svg. Básicamente, quiero mostrar modal cuando hago clic en un área específica en el mapa svg. Hasta ahora, leí que puedo usar la etiqueta -a- y pasar los parámetros de clase dentro de ella, pero no podría lograr nada. ¿Cómo puedo hacer esto? Gracias.
aquí está html
<a data-mdb-target="#exampleModal" onclick="return false" data-mdb-toggle="modal" > <g id="ege" class="region" data-bolgeadi="Ege Bölgesi"> <path> . . </g> </a>---Modal---
<div class="modal top fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-mdb-backdrop="true" data-mdb-keyboard="true"> <div class="modal-dialog modal-xl "> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body">...</div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal"> Close </button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>y el código JS que implementé a partir de las fuentes que he leído hasta ahora...
$('a[href$="#exampleModal"]').on( "click", function() { $('#exampleModal').modal('show'); });Prueba esto:
HTML:
<svg> <!--Your SVG code here--> </svg> <div id="clickbox-1"></div>CSS:
#clickbox-1{ position: absolute; top: /*y pos*/; left: /*x pos*/; width: 100px; /*You can change the sizes*/ height: 100px; /*OPTIONAL clip-path: path(some path data here)*/ }Puede adjuntar sus eventos de clic a las áreas de clic y ubicar las áreas de clic en las regiones que desee.