Replace with dynamic content

by Hugo Carneiro

HTML

<a href="#" onclick="return getOverlayContent('overlay-content');"><img src="http://placehold.it/100x100"/></a>
<a href="#" onclick="return getOverlayContent('overlay-content-2');"><img src="http://placehold.it/100x100"/></a>
<div class="placeHolder"></div>

<!-- Content -->
<script type="text/html" id="overlay-content">// <![CDATA[
<div>Content One</div>
// ]]></script>
<script type="text/html" id="overlay-content-2">// <![CDATA[
<div>Content Two</div>
// ]]></script>

JavaScript

function showPanelOverlay(panel) {
    var $panel = $(panel);
    var panelContent = $panel.html();
    panelContent = '<table>' + panelContent + '</table>';
    $('.placeHolder').html(panelContent);
}

function getOverlayContent(contentID) {
    var panelOverlayContent = $('#'+contentID).html();
    var content = panelOverlayContent.replace("// <![CDATA[", "").replace("// ]]>", "");    
    showPanelOverlay(content);
}