Home > Software design >  Automatic popup
Automatic popup

Time：01-28

Good morning.

I am attaching this code which is a popup, opening when you click on the Open Popup button, but I need to make this PopUp automatic when the web page is opened. If you can help me or guide me to do it because I don't know how I can do it.

Thank you so much..........................................................................

var btnAbrirPopup = document.getElementById('btn-abrir-popup'),
    overlay = document.getElementById('overlay'),
    popup = document.getElementById('popup'),
    btnCerrarPopup = document.getElementById('btn-cerrar-popup');

btnAbrirPopup.addEventListener('click', function(){
    overlay.classList.add('active');
    popup.classList.add('active');
});

btnCerrarPopup.addEventListener('click', function(e){
    e.preventDefault();
    overlay.classList.remove('active');
    popup.classList.remove('active');
});
* {
    padding: 0;
    margin: 0;
    box-sizing:border-box;
}

body {
    background: #fff;
    font-family: 'Open Sans', sans-serif;
}

.contenedor {
    width: 90%;
    max-width: 1000px;
    margin: 20px auto;
}

.contenedor article {
    line-height: 28px;
}

.contenedor article h1 {
    font-size: 30px;
    text-align: left;
    padding: 50px 0;
}

.contenedor article p {
    margin-bottom: 20px;
}

.contenedor article .btn-abrir-popup {
    padding: 0 20px;
    margin-bottom: 20px;
    height: 40px;
    line-height: 40px;
    border: none;
    color: #fff;
    background: #5E7DE3;
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: .3s ease all;
    cursor: pointer;
}

.contenedor article .btn-abrir-popup:hover {
    background: rgba(94,125,227, .9);
}

/* ------------------------- */
/* POPUP */
/* ------------------------- */

.overlay {
    background: rgba(0,0,0,.3);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    visibility: hidden;
}

.overlay.active {
    visibility: visible;
}

.popup {
    background: #F8F8F8;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
    padding: 20px;
    text-align: center;
    width: 600px;
    
    transition: .3s ease all;
    transform: scale(0.7);
    opacity: 0;
}

.popup .btn-cerrar-popup {
    font-size: 16px;
    line-height: 16px;
    display: block;
    text-align: right;
    transition: .3s ease all;
    color: #BBBBBB;
}

.popup .btn-cerrar-popup:hover {
    color: #000;
}

.popup h3 {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 10px;
    opacity: 0;
}

.popup h4 {
    font-size: 26px;
    font-weight: 300;
    margin-bottom: 40px;
    opacity: 0;
}

.popup form .contenedor-inputs {
    opacity: 0;
}

.popup form .contenedor-inputs input {
    width: 100%;
    margin-bottom: 20px;
    height: 52px;
    font-size: 18px;
    line-height: 52px;
    text-align: center;
    border: 1px solid #BBBBBB;
}

.popup form .btn-submit {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    border: none;
    color: #fff;
    background: #5E7DE3;
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: .3s ease all;
}

.popup form .btn-submit:hover {
    background: rgba(94,125,227, .9);
}

/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */
.popup.active { transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }

@keyframes entradaTitulo {
    from {
        opacity: 0;
        transform: translateY(-25px);
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes entradaSubtitulo {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes entradaInputs {
    from { opacity: 0; }
    to { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en">
<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">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600|Open Sans" rel="stylesheet"> 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
    <link rel="stylesheet" href="estilos.css">
    <title>Ventana Emergente Animada</title>
</head>
<body>

        <button id="btn-abrir-popup" >Abrir Ventana Emergente</button>

        <div  id="overlay">
            <div  id="popup">
                <a href="#" id="btn-cerrar-popup" ><i ></i></a>
                <h3>SUSCRIBETE</h3>
                <h4>y recibe un cupon de descuento.</h4>
                <form action="">
                    <div >
                        <input type="text" placeholder="Nombre">
                        <input type="email" placeholder="Correo">
                    </div>
                    <input type="submit"  value="Suscribirse">
                </form>
            </div>
        </div>

    <script src="popup.js"></script>
</body>
</html>

CodePudding user response：

any code in js without when button click will run first when screen loads,so remove when button clicked detector 

var btnAbrirPopup = document.getElementById('btn-abrir-popup'),
    overlay = document.getElementById('overlay'),
    popup = document.getElementById('popup'),
    btnCerrarPopup = document.getElementById('btn-cerrar-popup');

/*btnAbrirPopup.addEventListener('click', function(){*/
/*We have removed this click function and commented*/
    overlay.classList.add('active');
    popup.classList.add('active');
/*});*/

btnCerrarPopup.addEventListener('click', function(e){
    e.preventDefault();
    overlay.classList.remove('active');
    popup.classList.remove('active');
});
* {
    padding: 0;
    margin: 0;
    box-sizing:border-box;
}

body {
    background: #fff;
    font-family: 'Open Sans', sans-serif;
}

.contenedor {
    width: 90%;
    max-width: 1000px;
    margin: 20px auto;
}

.contenedor article {
    line-height: 28px;
}

.contenedor article h1 {
    font-size: 30px;
    text-align: left;
    padding: 50px 0;
}

.contenedor article p {
    margin-bottom: 20px;
}

.contenedor article .btn-abrir-popup {
    padding: 0 20px;
    margin-bottom: 20px;
    height: 40px;
    line-height: 40px;
    border: none;
    color: #fff;
    background: #5E7DE3;
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: .3s ease all;
    cursor: pointer;
}

.contenedor article .btn-abrir-popup:hover {
    background: rgba(94,125,227, .9);
}

/* ------------------------- */
/* POPUP */
/* ------------------------- */

.overlay {
    background: rgba(0,0,0,.3);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    visibility: hidden;
}

.overlay.active {
    visibility: visible;
}

.popup {
    background: #F8F8F8;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
    padding: 20px;
    text-align: center;
    width: 600px;
    
    transition: .3s ease all;
    transform: scale(0.7);
    opacity: 0;
}

.popup .btn-cerrar-popup {
    font-size: 16px;
    line-height: 16px;
    display: block;
    text-align: right;
    transition: .3s ease all;
    color: #BBBBBB;
}

.popup .btn-cerrar-popup:hover {
    color: #000;
}

.popup h3 {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 10px;
    opacity: 0;
}

.popup h4 {
    font-size: 26px;
    font-weight: 300;
    margin-bottom: 40px;
    opacity: 0;
}

.popup form .contenedor-inputs {
    opacity: 0;
}

.popup form .contenedor-inputs input {
    width: 100%;
    margin-bottom: 20px;
    height: 52px;
    font-size: 18px;
    line-height: 52px;
    text-align: center;
    border: 1px solid #BBBBBB;
}

.popup form .btn-submit {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    border: none;
    color: #fff;
    background: #5E7DE3;
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: .3s ease all;
}

.popup form .btn-submit:hover {
    background: rgba(94,125,227, .9);
}

/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */
.popup.active { transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }

@keyframes entradaTitulo {
    from {
        opacity: 0;
        transform: translateY(-25px);
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes entradaSubtitulo {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes entradaInputs {
    from { opacity: 0; }
    to { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en">
<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">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600|Open Sans" rel="stylesheet"> 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
    <link rel="stylesheet" href="estilos.css">
    <title>Ventana Emergente Animada</title>
</head>
<body>

        <button id="btn-abrir-popup" >Abrir Ventana Emergente</button>

        <div  id="overlay">
            <div  id="popup">
                <a href="#" id="btn-cerrar-popup" ><i ></i></a>
                <h3>SUSCRIBETE</h3>
                <h4>y recibe un cupon de descuento.</h4>
                <form action="">
                    <div >
                        <input type="text" placeholder="Nombre">
                        <input type="email" placeholder="Correo">
                    </div>
                    <input type="submit"  value="Suscribirse">
                </form>
            </div>
        </div>

    <script src="popup.js"></script>
</body>
</html>

CodePudding user response：

Check this! Here you can find how to make an pop up, it runs when the page loads and views the pop up, actually it's easy to do yourself and you don't need to search a solution , what you can do is a DOM which runs at page loaded, and execute, or some other way ( when page load --> show pop up )

Click here

CodePudding user response：

Use the load event over the DOMContentLoaded since we need the CSS and possibly backgrounds etc

Then just click the button

window.addEventListener("load",function() { btnAbrirPopup.click() })


var btnAbrirPopup = document.getElementById('btn-abrir-popup'),
    overlay = document.getElementById('overlay'),
    popup = document.getElementById('popup'),
    btnCerrarPopup = document.getElementById('btn-cerrar-popup');

btnAbrirPopup.addEventListener('click', function(){
    overlay.classList.add('active');
    popup.classList.add('active');
});

btnCerrarPopup.addEventListener('click', function(e){
    e.preventDefault();
    overlay.classList.remove('active');
    popup.classList.remove('active');
});
window.addEventListener("load",function() { btnAbrirPopup.click() })
* {
    padding: 0;
    margin: 0;
    box-sizing:border-box;
}

body {
    background: #fff;
    font-family: 'Open Sans', sans-serif;
}

.contenedor {
    width: 90%;
    max-width: 1000px;
    margin: 20px auto;
}

.contenedor article {
    line-height: 28px;
}

.contenedor article h1 {
    font-size: 30px;
    text-align: left;
    padding: 50px 0;
}

.contenedor article p {
    margin-bottom: 20px;
}

.contenedor article .btn-abrir-popup {
    padding: 0 20px;
    margin-bottom: 20px;
    height: 40px;
    line-height: 40px;
    border: none;
    color: #fff;
    background: #5E7DE3;
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: .3s ease all;
    cursor: pointer;
}

.contenedor article .btn-abrir-popup:hover {
    background: rgba(94,125,227, .9);
}

/* ------------------------- */
/* POPUP */
/* ------------------------- */

.overlay {
    background: rgba(0,0,0,.3);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    visibility: hidden;
}

.overlay.active {
    visibility: visible;
}

.popup {
    background: #F8F8F8;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
    padding: 20px;
    text-align: center;
    width: 600px;
    
    transition: .3s ease all;
    transform: scale(0.7);
    opacity: 0;
}

.popup .btn-cerrar-popup {
    font-size: 16px;
    line-height: 16px;
    display: block;
    text-align: right;
    transition: .3s ease all;
    color: #BBBBBB;
}

.popup .btn-cerrar-popup:hover {
    color: #000;
}

.popup h3 {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 10px;
    opacity: 0;
}

.popup h4 {
    font-size: 26px;
    font-weight: 300;
    margin-bottom: 40px;
    opacity: 0;
}

.popup form .contenedor-inputs {
    opacity: 0;
}

.popup form .contenedor-inputs input {
    width: 100%;
    margin-bottom: 20px;
    height: 52px;
    font-size: 18px;
    line-height: 52px;
    text-align: center;
    border: 1px solid #BBBBBB;
}

.popup form .btn-submit {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    border: none;
    color: #fff;
    background: #5E7DE3;
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: .3s ease all;
}

.popup form .btn-submit:hover {
    background: rgba(94,125,227, .9);
}

/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */
.popup.active { transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }

@keyframes entradaTitulo {
    from {
        opacity: 0;
        transform: translateY(-25px);
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes entradaSubtitulo {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes entradaInputs {
    from { opacity: 0; }
    to { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en">
<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">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600|Open Sans" rel="stylesheet"> 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
    <link rel="stylesheet" href="estilos.css">
    <title>Ventana Emergente Animada</title>
</head>
<body>

        <button id="btn-abrir-popup" >Abrir Ventana Emergente</button>

        <div  id="overlay">
            <div  id="popup">
                <a href="#" id="btn-cerrar-popup" ><i ></i></a>
                <h3>SUSCRIBETE</h3>
                <h4>y recibe un cupon de descuento.</h4>
                <form action="">
                    <div >
                        <input type="text" placeholder="Nombre">
                        <input type="email" placeholder="Correo">
                    </div>
                    <input type="submit"  value="Suscribirse">
                </form>
            </div>
        </div>

    <script src="popup.js"></script>
</body>
</html>

CodePudding user response：

you can use load DOMContentLoaded event

this event will be fired when the dom is fully loaded.

or you can take advantage of the load event too.

see the below example.

var btnAbrirPopup = document.getElementById('btn-abrir-popup'),
    overlay = document.getElementById('overlay'),
    popup = document.getElementById('popup'),
    btnCerrarPopup = document.getElementById('btn-cerrar-popup');

function showPopus(){
  overlay.classList.add('active');
    popup.classList.add('active');
}
btnAbrirPopup.addEventListener('click', function(){
    showPopus();
});


btnCerrarPopup.addEventListener('click', function(e){
    e.preventDefault();
    overlay.classList.remove('active');
    popup.classList.remove('active');
});

window.addEventListener('DOMContentLoaded', (event) => {
   showPopus();
});
* {
    padding: 0;
    margin: 0;
    box-sizing:border-box;
}

body {
    background: #fff;
    font-family: 'Open Sans', sans-serif;
}

.contenedor {
    width: 90%;
    max-width: 1000px;
    margin: 20px auto;
}

.contenedor article {
    line-height: 28px;
}

.contenedor article h1 {
    font-size: 30px;
    text-align: left;
    padding: 50px 0;
}

.contenedor article p {
    margin-bottom: 20px;
}

.contenedor article .btn-abrir-popup {
    padding: 0 20px;
    margin-bottom: 20px;
    height: 40px;
    line-height: 40px;
    border: none;
    color: #fff;
    background: #5E7DE3;
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: .3s ease all;
    cursor: pointer;
}

.contenedor article .btn-abrir-popup:hover {
    background: rgba(94,125,227, .9);
}

/* ------------------------- */
/* POPUP */
/* ------------------------- */

.overlay {
    background: rgba(0,0,0,.3);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    visibility: hidden;
}

.overlay.active {
    visibility: visible;
}

.popup {
    background: #F8F8F8;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
    padding: 20px;
    text-align: center;
    width: 600px;
    
    transition: .3s ease all;
    transform: scale(0.7);
    opacity: 0;
}

.popup .btn-cerrar-popup {
    font-size: 16px;
    line-height: 16px;
    display: block;
    text-align: right;
    transition: .3s ease all;
    color: #BBBBBB;
}

.popup .btn-cerrar-popup:hover {
    color: #000;
}

.popup h3 {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 10px;
    opacity: 0;
}

.popup h4 {
    font-size: 26px;
    font-weight: 300;
    margin-bottom: 40px;
    opacity: 0;
}

.popup form .contenedor-inputs {
    opacity: 0;
}

.popup form .contenedor-inputs input {
    width: 100%;
    margin-bottom: 20px;
    height: 52px;
    font-size: 18px;
    line-height: 52px;
    text-align: center;
    border: 1px solid #BBBBBB;
}

.popup form .btn-submit {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    border: none;
    color: #fff;
    background: #5E7DE3;
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: .3s ease all;
}

.popup form .btn-submit:hover {
    background: rgba(94,125,227, .9);
}

/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */
.popup.active { transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }

@keyframes entradaTitulo {
    from {
        opacity: 0;
        transform: translateY(-25px);
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes entradaSubtitulo {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes entradaInputs {
    from { opacity: 0; }
    to { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en">
<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">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600|Open Sans" rel="stylesheet"> 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
    <link rel="stylesheet" href="estilos.css">
    <title>Ventana Emergente Animada</title>
</head>
<body>

        <button id="btn-abrir-popup" >Abrir Ventana Emergente</button>

        <div  id="overlay">
            <div  id="popup">
                <a href="#" id="btn-cerrar-popup" ><i ></i></a>
                <h3>SUSCRIBETE</h3>
                <h4>y recibe un cupon de descuento.</h4>
                <form action="">
                    <div >
                        <input type="text" placeholder="Nombre">
                        <input type="email" placeholder="Correo">
                    </div>
                    <input type="submit"  value="Suscribirse">
                </form>
            </div>
        </div>

    <script src="popup.js"></script>
</body>
</html>

CodePudding user response：

document.addEventListener("DOMContentLoaded", function(){
    overlay.classList.add('active');
    popup.classList.add('active');
});

Page link：https//www.codepudding.com/Softwaredesign/279883.html

Prev:Render values from array of objects which contains an object (React, Typescript)
Next:React state update produces wrong result
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding