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.
<mat-form-field>
parece de angular, ¿estás usándolo?<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.*ngIf=...
y olvidarte de los estilos: Angular añadirá el modal cuando se lo indiques y lo eliminará totalmente en caso contrario