Popup JS: Create, open and close popup page elements

Recommend this page to a friend!

Download

Info

Example

Files

Download

Reputation

Support forum

Blog

Links

Ratings				Unique User Downloads		Download Rankings
Not yet rated by the users				Total: 91		All time: 430 This week: 2

Version		License		JavaScript version		Categories
`popupjs` 1.0.1		MIT/X Consortium ...		5		HTML

Description

Author

Agustin Rios Reyes

This object can create, open and close popup page elements.

It can take the identifier of a given page element and make it visible as a popup.

The object can also configure several aspects of the popup like the opacity, positioning, background color, etc..

Agustin Rios Reyes

Performance

Level

Name:	Agustin Rios Reyes `<contact>`
Classes:	4 packages by Agustin Rios Reyes
Country:	Mexico
Age:	38
All time rank:	79	2 in Mexico
Week rank:	6	1 in Mexico

Level 2

Innovation award

Nominee: 1x

Example

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title></title>
</head>
<body>
	<header class=""></header>
	<main class="" style="background: red none repeat scroll 0% 0%; width: 90%; height: 300px; margin: 0px auto;">
		<div id="popup1" style="background-color: rgb(204, 204, 204); padding: 10px; border-radius: 10px;">
			<h1>hola Enfermera</h1>
			<button id="ocultar">Ocultar</button>
		</div>
		<button id="mostrar">Mostrar</button>
	</main>
	<footer class=""></footer>
</body>
</html>
<script src="popup_dialogo.js"></script>
<script>
	var popup = new PopupDialogo( "popup1" );
	
	popup.MostrarDialogo();
	popup.setConteLeft('30%');
	popup.setBackgroundColor( '#000');
	popup.setOpacity(60);

	document.getElementById('ocultar').onclick = function(){ popup.OcultarDialogo(); }
	document.getElementById('mostrar').onclick = function(){ popup.MostrarDialogo(); }
</script>

Details

popupJS

Popup javascrip Clase javascript que permite crear el efecto popup.

Files (5)

File	Role	Description
`popup_dialogo.js`	Class	Class source
`pruebapopup.html`	Example	Example script
`pruebapopup2.html`	Example	Example script
`pruebapopup3.html`	Example	Example script
`README.md`	Data	Auxiliary data