Modal window when clicking on info box link opened by a Google Maps marker

Asked

Viewed 593 times

3

I’m using Bootstrap and on my page index, I have a working modal window, which opens when I click on a href.

I also have a div for the map that reads a JSON file, where, there is the information to add the markers in it, are: ID, latitude, longitude and a content for an "infobox" that will open by clicking on the marker.

The problem is that in this infobox content I have a: 

<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">Veja mais</a>

In the same way that I do to open the modal window by other "a hrefs" on my page, however, this above link that is displayed in the marker infobox does not open the modal window. The URL changes to http://www.meusite.com/index.html#portfolioModal1

PS: It was as if in the infobox was a synopsis and clicking on See more would open all the information of the place... but nothing happens. Any idea?

If you find it necessary to put snippets of code let me know what I put, I thought it was not necessary because who knows the tools mentioned knows how they work.

Thank you!

twitter-bootstrap google-maps markers

  • How is your modal div id or name? It has to be with portfolioModal1 as well.

  • 1

    Yes, it’s all right, so much so that outside of this "infobox" marker, it works, any link like the above opens the window

  • Oi, Bruno, writing too much is never cool for understanding the problem, but don’t count on "who knows the tools mentioned knows how they work", has times I do not know the answer and I try to solve only by the challenge. Anyway, check out the guide How to create a Minimum, Complete and Verifiable example, is well worth it. And if you know English, Jon Skeet’s guide is kind of definitive, really good, instant upgrade in our ability to explain a problem: Writing the Perfect Question

  • Hello Brasofilo, I said this because it is not convenient to paste the bootstrap code here, I thought the problem was intentional, just like a path, what would be possible to be causing the problem, just wanted the functions responsible for the modal open have effect inside the infobox.... Anyway thanks for your comment, I will pay attention to the tips.

1 answer

0


I got it here. Instead of using the bootstrap ready methods to open the modal by infobox, in my infobox I made a <a href="#" onclick="mostrar()">Veja mais</a>

And then, in my index.html I made a js function mostrar()

        $('#portfolioModal' + id).modal('toggle');
        $('#portfolioModal' + id).modal('show');

My only problem is that the page goes up (goes to the top) does not stay where it was...

Browser other questions tagged twitter-bootstrap google-maps markers

You are not signed in. Login or sign up in order to post.