Modals sem Bootstrap!
Para usar é simples, no head, coloque isso:
<script src="https://aeffy.com/js/modal.js"></script>
<link rel="stylesheet" href="https://aeffy.com/css/modal.css" type="text/css"/>
Depois, em um botão, por exemplo, adicione:
onclick="modal('ID DA DIV ONDE SE LOCALIZA O MODAL', 'HEIGHT RECOMENDADO EM %', 'WIDTH RECOMENDADO EM %')"
Modal:
<div id="ID DA DIV ONDE LOCALIZA O MODAL" class="aeffy-modal">
<!-- Não se esqueça do close -->
<div class="aeffy-modal-close">X</div>
<div class="aeffy-modal-title"><center><h1>Olá, este é um modal!</h1></center></div>
<h2>
Este modal é apelidado de Francisco.
<br>
Francisco é um modal muito legal, vire amigo dele!
</h2>
</div>
E pronto, já estará funcionando, você pode ter vários modals, é só alterar no id na div e no onclick.
OBS.: Se for alterar a largura, leve em consideração o left.
GitHub: https://github.com/Aeffy/Modals
Página para você testar:
https://aeffy.com/modal.php
Veja também: Copy to Clipboard!
Qualquer bug, avise via MP
(A estilização da fonte fica por sua conta)