Blog

Compartimos con Ustedes nuestros conocimientos y de momentos interesantes

14 noviembre, 2018

Acceda a la página por contraseña en la ventana emergente

En este artículo, te mostraré cómo acceder a la página por contraseña en una ventana emergente de forma rápida y eficiente. Si necesita una protección más fuerte, lea los comentarios sobre este artículo.

Lo haremos usando JavaScript y HTML con CSS. Todo el artículo que voy a compartir en los pasos con los que fácilmente será capaz de repetir estos movimientos y obtener lo mismo que yo.

Acceda a la página por contraseña en la ventana emergente

Tenemos un sitio web y tenemos una página y tenemos que restringir el acceso a ella. Para ello, entramos en el código de esta página y escribimos el código de la ventana emergente, junto con los estilos al principio de nuestra página. Tenga en cuenta que este método solo funciona en páginas estáticas, si usa algún CMS, busque los módulos apropiados.

<style type="text/css">
html {
	padding: 0;
	margin: 0;
}
.modalDialog {
 position: fixed;
 font-family: Arial, Helvetica, sans-serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: #000;
 z-index: 99999;
 display: block;
}
 
.modalDialog > div {
 width: 400px;
 position: relative;
 margin: 10% auto;
 padding: 5px 20px 13px 20px;
 border-radius: 10px;
 background: #fff;
 background: -moz-linear-gradient(#fff, #999);
 background: -webkit-linear-gradient(#fff, #999);
 background: -o-linear-gradient(#fff, #999);
}
.close {
	display: none;
}
</style>
<script type="text/javascript">
function my_proverka () {
var code = document.getElementById("my_pass").value;
var pass = "basww2mKKdnkKKsmmas";
if (code == pass) {
var win = document.getElementById("openModal");
win.classList.add("close");
}
}
</script>
<div id="openModal" class="modalDialog">
   <div>
      <h2>Введите пароль</h2>
<input type="password" id="my_pass" placeholder="Introduzca la contraseña aquí">
<input type="submit" onclick="my_proverka();" value="Enter">
   </div>
</div>

<div style="color: #000;"> Aquí el código de nuestro sitio principal es nuestro sitio principal.</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

html {

padding: 0;

margin: 0;

}

.modalDialog {

position: fixed;

font-family: Arial, Helvetica, sans-serif;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: #000;

z-index: 99999;

display: block;

}

.modalDialog > div {

width: 400px;

position: relative;

margin: 10% auto;

padding: 5px 20px 13px 20px;

border-radius: 10px;

background: #fff;

background: -moz-linear-gradient(#fff, #999);

background: -webkit-linear-gradient(#fff, #999);

background: -o-linear-gradient(#fff, #999);

}

.close {

display: none;

}

</style>

function my_proverka () {

var code = document.getElementById("my_pass").value;

var pass = "basww2mKKdnkKKsmmas";

if (code == pass) {

var win = document.getElementById("openModal");

win.classList.add("close");

}

</script>

<div>

<h2>Введите пароль</h2>

</div>

<div style="color: #000;"> Aquí el código de nuestro sitio principal es nuestro sitio principal.</div>

¿Qué hace este código? Cubre el contenido del sitio y espera a que se introduzca la contraseña en el campo correspondiente. Después de introducir la contraseña, se iniciará la verificación para que coincida con el código que hay en el sistema, a continuación, iniciar sesión en el sitio.

Advertencia

¡Atención, queridos amigos! Código para principiantes, no lo use en proyectos serios, porque este código se crea de forma elemental y cualquiera puede evitarlo. Necesita cosas más serias para proteger la página, entonces sin ayuda del servidor no puede ser. A continuación hay enlaces en los comentarios.

Epígrafes: JavaScript

Como hacer un texto emergente sobre una imagen en html?

Día de la exportación: cómo exportar y hacer negocios con los países de américa latina

Siempre estamos en contacto con usted

+7 (906) 272-38-19
Tel./ WhatsApp/ Viber
info@cruelten.ru
Cruelten
Cruelten
Cruelten

Antes de contactar con los contactos que aparecen aquí, le pedimos que compare los precios y condiciones de nuestros competidores.

Esto le dará Una idea amplia de cuánto cuesta los servicios en el desarrollo del sitio llave en mano, cuánto tiempo lleva crear una tienda en línea o un sitio de tarjeta de visita.

No tardaremos más de tres semanas. Gracias.

Lo último en el blog

Acceda a la página por contraseña en la ventana emergente

Acceda a la página por contraseña en la ventana emergente

Advertencia

Epígrafes

Ajax Base de datos Cruelten CSS Errores Es útil conocer Feedback HTML JavaScript JQuery Menú MODX PHP Plugins Slider Widget WooCommerce WordPress

Estamos en Facebook

Cruelten_ES

Siempre estamos en contacto con usted