2

Hola comunidad tengo un botón de contáctanos plegable que he creado con ayuda de W3school la verdad es que necesito que se mantenga cerrado y cuando se de click en él, se despliegue mi ventana modal, pero he intentado muchas formas y aun no he podido resolverlo, tanto en ingles como en español, se que puede ser algo tonto pero aun soy muy novata. Este es mi código Html estoy usando angular, javascript y css

    <button onclick="myFunction()" class="deployform"> <i class="fi-rr-envelope"></i> </button>

<div id="id01">
  <div class="content">
      <h2 class="tittle-modal-h2">¡HOLA!</h2>
      <p class="text-uno">lorem....</p>
      
      <mat-form-field appearance="fill">
        <mat-label>Escriba su mensaje aquí...</mat-label>
        <textarea matInput></textarea>
      </mat-form-field>
      <button mat-raised-button class="enviar">Enviar</button>
      <mat-checkbox style="width: 300px; margin-top: 32px; margin-left: 108px;" >  Acepto <a href="#" style="text-align: left; text-decoration: underline; font: normal normal bold 12px/18px Poppins; letter-spacing: 0px; color: #353535;">la política de tratamiento de datos.</a></mat-checkbox>
      <p class="text-dos">calle falsa 123 tel: 1234566</p>
  </div>

  <button onclick="myFunction()" class="deployform">
    <i class="fi-rr-cross"></i>
  </button>
</div>

Esto es mi codigo javascript.

<script>
   
    function myFunction() {
      var x = document.getElementById('id01');

      if (x.style.display === 'none') {
        x.style.display = 'block';
      } else {
        x.style.display = 'none';
      }
    }
    </script>

De momento solo me queda agradecer que alguno en la comunidad me pueda instruir y me ayude a orientarme un poco más.

5
  • Esa etiqueta <mat-form-field> parece de angular, ¿estás usándolo? Commented el 14 jul. 2021 a las 15:28
  • Si, estoy usando angular, creo que lo deje fijado cuando coloque la pregunta, Angular, Javascript, Html y Css, pero en si el angular solo lo estoy aplicando para un botón en especifico no tiene nada que ver con lo demás.
    – Ktarch
    Commented el 14 jul. 2021 a las 15:32
  • Al crear la etiqueta aplica estilo para ocultarlo <div id="id01" style="display:none;">, aunque sería mejor hacerlo con reglas CSS, pero la función analiza y modifica el estilo de esta forma.
    – Triby
    Commented el 14 jul. 2021 a las 16:14
  • 1
    Mezclar la forma de trabajar de Angular con el manejo clásico del DOM no es una buena idea, generalmente. Lo ideal sería tener ese modal con un *ngIf=... y olvidarte de los estilos: Angular añadirá el modal cuando se lo indiques y lo eliminará totalmente en caso contrario Commented el 14 jul. 2021 a las 16:33
  • Triby Me haz salvado la vida Muchísimas gracias Funcionó.
    – Ktarch
    Commented el 14 jul. 2021 a las 16:37

1 respuesta 1

2

Al crear la etiqueta aplica estilo para ocultarlo

<div id="id01" style="display:none;">

Aunque sería mejor hacerlo con reglas CSS, pero la función analiza y modifica el estilo de esta forma. – Triby.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.