Generador de notas adhesivas simple en JavaScript puro-Hugo footnote popup

Vista prévia

Descripción

Hugo footnote popup es una librería JavaScript pura para mostrar citas y explicaciones en una ventana emergente de pie de página que siempre permanece en la parte inferior de la página web, sin importar cómo se desplaza la Página Web.

Funcionamiento

Añada el número de nota al texto utilizando el elemento < sup > .

<sup class="footnote-ref" id="fnref:1">

<a rel="footnote" href="#fn:1">1</a>
</sup>

<sup class="footnote-ref" id="fnref:2">

<a rel="footnote" href="#fn:2">2</a>
</sup>

<sup class="footnote-ref" id="fnref:3">

<a rel="footnote" href="#fn:3">3</a>
</sup>

...

Defina las citas y explicaciones en una lista HTML ordenada de la siguiente manera:

<ol>

<li id="fn:1">This is a <a href="javascript:void(0);">anchor</a> footnote number 1


<a class="footnote-return" href="#fnref:1">



<sup>[return]</sup>


</a>

</li>

<li id="fn:2">Number 2 <b>footnote</b>


<a class="footnote-return" href="#fnref:2">



<sup>[return]</sup>


</a>

</li>

<li id="fn:3">Number 3 <abbr title="Hello world!">footnote</abbr>


<a class="footnote-return" href="#fnref:3">



<sup>[return]</sup>


</a>

</li>

...
</ol>

Cree el popup de notas al pie en la parte inferior de la Página Web.

<div class="bottom-panel" id="bottom-panel">
	<div class="popup-wrapper" id="popup-wrapper">
		<div id="popup-index"></div>
		<div id="popup-content"></div>
		<div class="popup-cl" id="popup-close"><a href="javascript:void(0);" class="close" style="text-decoration: none;">[x]</a></div>
	</div>
 </div>

Descargue e inserte el archivo JavaScript notas al pie. js en el documento.

<script src="footnotes.js"></script>

El ejemplo CSS para el estilo de la nota emergente.

.bottom-panel {

position: fixed;

font-size: 0.9rem;

bottom: 0;

left: 0;

right: 0;
}

.popup-wrapper {

display: none;

max-width: 560px;

margin: 0 auto;

background-color: white;

border-top: 3px solid black;
}

#popup-index {

padding: 1.25rem 0 0 1.25rem;
}

.popup-cl {

padding: 1.25rem;

margin-left: auto;

cursor: pointer;
}

#popup-content {

max-width: 500px;

text-align: left;

padding: 1.25rem 0 1.25rem 0.9rem;
}