On my side, I use bootstrap modals (aka dialogs / overlays) with remote content to display the detail view of some things (for example for detail view of user reviews/comments).
The code looks like this:
<a data-toggle="modal" href="/detail-12.html" data-target="#myModal">Detail of this comment 12</a>
Basically, when a user clicks on the link, bootstrap loads the content of the href and inserts it as an overlay to the page. Google and other SE follow the link, because its a normal link for them and they index the page.
The problem:
Since I only load the modal content (basically without <html><head>
...etc.) without any site structure like header, navigation or sidebar, I have a useless page indexed.
Since the aim of my question, wasn't clear enought, I had to change the question a little bit:
At the moment, a normal user clicks on the link and sees a modal with the content "<h1>Detail of Product 12</h1>
". Thats fine and what I want!
A non JavaScript User or Google Crawler would follow the link to /deatil-12.html and see a white, unstyled page without any navigation or footer, just with the content "<h1>Detail of Product 12</h1>
". This ugly page would be indexed by google. Thats bad, since if a user enters this page, he sees an ugly page and has no chance to reach other pages (since lack of navigation urls).
What I want
I want, that a normal User sees the content inside a modal (like know). And a non JS User (incl. Google) sees the content inside my normal page structure "<html><head>...</head><body><nav>My cool navigation</nav><h1>Detail 12</h1><p>Some content...</p><footer>My cool footer</footer></body></html>
".
I know, how to reach this technically (by adding a param on-click to the url. If this param is set, I will return the modal content only. If this param is not set (No JS = No Click-Event), I will return the complete HTML page including header, footer, navi, etc
My question
Will Google punish me for that or is it OK for Google?