Novato de JavaScript
En el pie de página del sitio, intento mostrar la información de contacto con un formulario emergente cada vez que copio el código en una página nueva o en un dispositivo nuevo. Al hacer clic en el clicked , se abre el formulario, pero luego se cierra inmediatamente. ¿Hay alguna forma de solucionarlo? ?
<button class="open-button" onclick="openForm()"> Contact Us</button> <div class="form-popup"> <form class="form-container" id="myForm"> <h1>info@indiepump.com</h1> <button type="button" class="btn-cancel" onclick="closeForm()">×</button> </form> </div> <script> function openForm() { //openForm().stopPropagation(); document.getElementById("myForm").style.display = "flex"; } function closeForm() { document.getElementById("myForm").style.display = "none"; } </script>Y la parte CSS:
.open-button { background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png); background-repeat: no-repeat; background-color: transparent; padding: 17px 21px; border: none; cursor: pointer; position: fixed; justify-content: space-between; align-items: center; vertical-align: middle; text-align: right; text-decoration: none; font-size: 0.9rem; margin-left: 1rem; height: 27px; width: 121px; padding: 3px 3px; padding-left: 3px; color: red; } .form-popup { display: none; position: fixed; align-items: center; justify-content: space-between; vertical-align: middle; bottom: 2.5rem; left: 2rem; border: 1px solid red; border-radius: 10px; color: red; font-size: 0.7rem; z-index: 10000; } .form-container { display: flex; max-width: 300px; width: 300px; height: 50px; align-items: center; justify-content: space-between; vertical-align: middle; text-align: center; padding: 10px; background-color: #f9e3d5; z-index: 100000; } .btn-cancel { display: flex; align-items: center; margin-bottom: 1rem; vertical-align: middle; text-align: center; width: 25px; height: 25px; border: none; background-color: transparent; color: red; font-size: 1.9rem; cursor: pointer; }Ya probé las soluciones de búsqueda de Google sin éxito.
También diferentes métodos de otros sitios útiles, pero cada vez que cambio algo, el botón no funciona en absoluto.
Después de hacer clic en el botón, el elemento con la clase .form-popup no se muestra porque en su CSS ha configurado display:none :
.form-popup { display: none; .... } Por lo tanto, también debe configurar display:flex or block para .form-popup .
Aquí está la muestra de trabajo:
function openForm() { document.getElementById("myForm").parentElement.style.display = "flex"; document.getElementById("myForm").style.display = "flex"; } function closeForm() { document.getElementById("myForm").style.display = "none"; document.getElementById("myForm").parentElement.style.display = "none"; } .open-button { background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png); background-repeat: no-repeat; background-color: transparent; padding: 17px 21px; border: none; cursor: pointer; position: fixed; justify-content: space-between; align-items: center; vertical-align: middle; text-align: right; text-decoration: none; font-size: 0.9rem; margin-left: 1rem; height: 27px; width: 121px; padding: 3px 3px; padding-left: 3px; color: red; } .form-popup { display: none; position: fixed; align-items: center; justify-content: space-between; vertical-align: middle; bottom: 2.5rem; left: 2rem; border: 1px solid red; border-radius: 10px; color: red; font-size: 0.7rem; z-index: 10000; } .form-container { display: flex; max-width: 300px; width: 300px; height: 50px; align-items: center; justify-content: space-between; vertical-align: middle; text-align: center; padding: 10px; background-color: #f9e3d5; z-index: 100000; } .btn-cancel { display: flex; align-items: center; margin-bottom: 1rem; vertical-align: middle; text-align: center; width: 25px; height: 25px; border: none; background-color: transparent; color: red; font-size: 1.9rem; cursor: pointer; } <button class="open-button" onclick="openForm()"> Contact Us </button> <div class="form-popup"> <form class="form-container" id="myForm"> <h1>info@indiepump.com</h1> <button type="button" class="btn-cancel" onclick="closeForm()">×</button> </form> </div>@Alireza Ahmadi
Reposteando el nuevo código...
function openForm() { document.getElementById("myForm").parentElement.style.display = "flex"; document.getElementById("myForm").style.display = "flex"; } function closeForm() { document.getElementById("myForm").style.display = "none"; document.getElementById("myForm").parentElement.style.display = "none"; } .open-button { background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png); background-repeat: no-repeat; background-color: transparent; padding: 17px 21px; border: none; cursor: pointer; position: fixed; justify-content: space-between; align-items: center; vertical-align: middle; text-align: right; text-decoration: none; font-size: 0.9rem; margin-left: 1rem; height: 27px; width: 121px; padding: 3px 3px; padding-left: 3px; color: red; } .form-popup { display: none; position: fixed; align-items: center; justify-content: space-between; vertical-align: middle; bottom: 2.5rem; left: 2rem; border: 1px solid red; border-radius: 10px; color: red; font-size: 0.7rem; z-index: 10000; } .div-form { display: flex; max-width: 300px; width: 300px; height: 50px; align-items: center; justify-content: space-between; vertical-align: middle; text-align: center; padding: 10px; background-color: #f9e3d5; z-index: 100000; } .btn-cancel { display: flex; align-items: center; margin-bottom: 1rem; vertical-align: middle; text-align: center; width: 25px; height: 25px; border: none; background-color: transparent; color: red; font-size: 1.9rem; cursor: pointer; } <button class="open-button" onclick="openForm()"> Contact Us</button> <div class="form-popup"> <div class="div-form" id="myForm"> <form class="form-container"> <h1>info@indiepump.com</h1> <button type="button" class="btn-cancel" onclick="closeForm()">×</button> </form> </div> </div>En este momento el botón no hace nada, la página solo muestra que se está actualizando.