Como abrir popup de un checkbox con javascript

Como abrir popup de un checkbox con javascript. Este código aunque es un poco inusual crear una función en JavaScript para que nos muestre una ventana tipo popup ya sea para configurar una opción en el módulo de nuestro proyecto o sino nuestra página web para mostrar información.

En un desarrollo de un software web, un cliente me pidió abrir un popup para dar paso a un login y mostrar más información de un módulo de rango de fechas, con esto limitaba a la secretaria de ver solo dos meses en el rango de fechas, si la secretaria deseaba más información de meses anteriores debería de dar clic en un chekbox html y abrir un popup para ingresar una credencial (Password), con esto se abría una ventana donde podía consultar desde 6 meses anteriores en rango de fechas de alumnos inscritos, con permiso del supervisor de área.

Como abrir popup de un checkbox con javascript

Paso 1 crear la funcion JavaScript

<script type = "text/javascript">
var count = 0;
function nuevapagina(page) {
if (count == 0) {  //en linea
count ++;
OpenWin = this.open(page,"CtrlWindow","top=80,left=100,screenX=100,screenY=80,width=550,height=460,toolbar=no,menubar=no,location=no, scrollbars=no,resizable=yes");
}

function closepop() {if (OpenWin != null) OpenWin.close() }
window.onunload = closepop;
}
</script>

Y como quedaria en el input tipo checkbox dentro de un formulario HTML

<input type = "checkbox" name = "check1" id = "check1"
onclick = "nuevapagina('mi_pagina.php')">

Y el resultado final quedaría de la siguiente manera

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Abrir Popup Con Checkbok Javascript</title>
<script type = "text/javascript">
var count = 0;
function nuevapagina(page) {
if (count == 0) {  //en linea
count ++;
OpenWin = this.open(page,"CtrlWindow","top=80,left=100,screenX=100,screenY=80,width=550,height=460,toolbar=no,menubar=no,location=no, scrollbars=no,resizable=yes");
}

function closepop() {if (OpenWin != null) OpenWin.close() }
window.onunload = closepop;
}
</script>
</head>
<body>
<form action="#" method="post">
<input type = "checkbox" name = "check1" id = "check1" onclick = "nuevapagina('pagina.php')">
</form>
</body>
</html>

Muy interesante el código, se puede adaptar a todo tipo de necesidades, tambien incluir funciones PHP para que sea más dinámicos, espero le den buen uso.

Como abrir popup de un checkbox con javascript
Como abrir popup de un checkbox con javascript

Fuente: Abrir popup checkbox

Me fascina la programación en diversos lenguajes y mas aún si son sistemas web o páginas web.

Entradas relacionadas

Cómo usar Explode en JavaScript Split()

Cómo usar Explode en JavaScript Split()

Cómo usar Explode en JavaScript Split(). Explode es capaz de dividir una cadena de texto o un array y se basa bajo un criterio en común dentro…

Integrar Bootstrap 3 Badge Colors

Integrar Bootstrap 3 Badge Colors

En este artículo vamos a integrar colores de fondo en la clase BADGE de Bootstrap 3. Integrar Bootstrap 3 Badge Colors. En el framework Bootstrap 3 por…

5 formar de validar checkbox

5 formar de validar checkbox

5 formar de validar checkbox. Aquí mostrare varias formas de validar checkbox usando jQuery y JavaScript, también usaremos funciones a nivel de formulario. Aquí debéis fijaros que…

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX?. Lo que haremos será trabajar en un div al hacer clic con el mouse usando jQuery, use el método toggle(). Por…

Enviar formulario usando checkbox

Enviar formulario usando checkbox

Enviar formulario usando checkbox. En este articulo veremos una forma de enviar un formulario HTML usando una casilla o varias casillas de verificación (checkbox). Por lo tanto,…

Limpiar Select2 jQuery

Limpiar Select2 jQuery: Ejemplo completo

Limpiar Select2 jQuery. En este articulo aprenderemos a restablecer para mostrar el marcador de posición select2. JQuery Select2 restablece y luego muestra el marcador de posición. Por…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *