Modal window uses content from page in use - doesn't pull from other pages.
Permalink
Hi there,
I am working with an SEO person who would like the following to be possible with which ever pop up addon we use:
"Choose a modal window type that adds content to the page without displaying it, rather than one that pulls content from another page. When the content within your modal window is present on the page, search engines can crawl and index that content. If your modal box content is on another page, the host page doesn't benefit from that content when indexed by search engines. All of the content of the popup windows on that page should be able to be viewed on View Page Source"
I'm trying to create one team bio page where there are mulitiple images of people and when clicked on, each of their text bios comes up in the pop up. But we want all of the text to come from the one Team Bio page, not from other individual pages for each person. This way the crawler sees all of the content on one page.
Trying to find the right addon that will accomplish this.
I've reviewed:
Popup
Popup Pro
Pug+
Thank you
I am working with an SEO person who would like the following to be possible with which ever pop up addon we use:
"Choose a modal window type that adds content to the page without displaying it, rather than one that pulls content from another page. When the content within your modal window is present on the page, search engines can crawl and index that content. If your modal box content is on another page, the host page doesn't benefit from that content when indexed by search engines. All of the content of the popup windows on that page should be able to be viewed on View Page Source"
I'm trying to create one team bio page where there are mulitiple images of people and when clicked on, each of their text bios comes up in the pop up. But we want all of the text to come from the one Team Bio page, not from other individual pages for each person. This way the crawler sees all of the content on one page.
Trying to find the right addon that will accomplish this.
I've reviewed:
Popup
Popup Pro
Pug+
Thank you
JAVA SCRIPT
-------------------------
$('#myModal2').on('show', function() {
$('#myModal').css('opacity', .5);
$('#myModal').unbind();
});
$('#myModal2').on('hidden', function() {
$('#myModal').css('opacity', 1);
$('#myModal').removeData("modal").modal({});
});
------------------------
CSS
------------------------
#myModal2 {
margin-top:200px;
}
------------------------
HTML
------------------------
<div class="container">
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch modal 1</a>
</div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One modal body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<a href="#myModal2" role="button" class="btn" data-toggle="modal">Launch other modal</a>
</div>
</div>
<div id="myModal2" class="modal hide fade" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal 2 header</h3>
</div>
<div class="modal-body">
<p>Two modal body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
-------------------------------------
<!-- I will not be following up with this conversation, I only made a burner acct to help you in this matter as I was working on something similar and came across this guys model for nested Modals, have a good day. hope it works out-->
-------------------------
$('#myModal2').on('show', function() {
$('#myModal').css('opacity', .5);
$('#myModal').unbind();
});
$('#myModal2').on('hidden', function() {
$('#myModal').css('opacity', 1);
$('#myModal').removeData("modal").modal({});
});
------------------------
CSS
------------------------
#myModal2 {
margin-top:200px;
}
------------------------
HTML
------------------------
<div class="container">
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch modal 1</a>
</div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One modal body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<a href="#myModal2" role="button" class="btn" data-toggle="modal">Launch other modal</a>
</div>
</div>
<div id="myModal2" class="modal hide fade" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal 2 header</h3>
</div>
<div class="modal-body">
<p>Two modal body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
-------------------------------------
<!-- I will not be following up with this conversation, I only made a burner acct to help you in this matter as I was working on something similar and came across this guys model for nested Modals, have a good day. hope it works out-->
Hope this helps, you should be able to just reproduce the ABOUT button. Maybe your next step after you build the HTML out wiht the Bootstrap v3 CSS implimented in the site, you can change the Bootstrap custom CSS file to make div ids so that theyre not buttons but pictures. And the pictures can be that of the team members.