<!-- Exemplo de Botão


<a type="button" style="width:50px" onclick="modalOnclick(this)">
	<img class="img-fluid" src="<?=$url;?>image/logo.png">


</a>-->

<script>
function modalOnclick(btn) {
	var thumbname = btn.innerHTML;
	var alt = btn.getElementsByTagName('img')[0].alt;
	var imgname = thumbname.replace("/thumb", "");
	var baseModal = getBaseModal();
	// Init the modal if it hasn't been already.
	if (!baseModal) { baseModal = initBaseModal(); }
	
	var html =
		'<div class="modal-header">' +
			'<h5 class="modal-title" id="baseModalLabel">'+alt+'</h5>' +
			'<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">' +
				'<span aria-hidden="true">&times;</span>' +
			'</button>' +
		'</div>' +
		'<div class="modal-body">' +
			imgname +
		'</div>' +
		'<div class="modal-footer">' +
			'<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>' +
		'</div>';

	setBaseModalContent(html);

	// Show the modal.
	jQuery(baseModal).modal('show');

}

function getBaseModal() {
	return document.getElementById('baseModal');
}

function setBaseModalContent(html) {
	getBaseModal().querySelector('.modal-content').innerHTML = html;
}

function initBaseModal() {
	var modal = document.createElement('div');
	modal.classList.add('modal', 'fade');
	modal.setAttribute('id', 'baseModal');
	modal.setAttribute('tabindex', '-1');
	modal.setAttribute('role', 'dialog');
	modal.setAttribute('aria-labelledby', 'baseModalLabel');
	modal.setAttribute('aria-hidden', 'true');
	modal.innerHTML =
		'<div class="modal-dialog" role="document">' +
			'<div class="modal-content"></div>' +
		'</div>';
	document.body.appendChild(modal);
	return modal;
}
</script>


