Why styles don't work in a modal window?

Hello! Please help to understand! This form is on the website! It has styles! But when I send it in a modal window, the styles disappear. There is code:
<div class="modal"></div>
 <div class="overlay"></div>
 <div class="popupcontact">
 <div class="wrapper">
 <div class="popupcontacttitle" id="about">subscribe now and get a free consultation!</div>
 <form action method="post" class="popupform">
 <input type="text" placeholder="Your name" name="name" value="<?=$_POST['name']?>">
 <span style="color:red"><?=$err['name']?></span>
 <input type="email" placeholder="Your email" name="email" value="<?=$_POST['e-mail']?>">
 <span style="color:red"><?=$err['email']?></span>
 <input type="text" placeholder="Your Skype" name="skype" value="<?=$_POST['skype']?>">
 <textarea name="sms-id" cols="30" rows="10" placeholder="message" value="<?=$_POST['sms']?>"></textarea>
 <span style="color:red"><?=$err['sms']?></span>
the <div>
 <input type="submit" value="Leave request">
</div>
</form>
</div>
 </div>

/* Modal window */
function Popup(options){
 this.modal = document.querySelector ('options.modal);
 this.overlay = document.querySelector ('options.overlay);

 var popup = this;

 this.open = function(content){
 popup.modal.innerHTML = content;
popup.overlay.classList.add('open');
popup.modal.classList.add('open');
}

 this.close = function(){
popup.overlay.classList.remove('open');
popup.modal.classList.remove('open');
}

 this.overlay.onclick = popup.close;
}

window.onload = function(){
 var p = new Popup({
 modal: '.modal',
 overlay: '.overlay'
});


 document.querySelector('.callme').onclick = function(){
 var form = document.querySelector('.popupcontact');
p.open(form.innerHTML);
};
}

The whole code: https://yadi.sk/d/Um4fMhWl3NRwdZ
June 14th 19 at 20:26
1 answer
June 14th 19 at 20:28
Duplicates what is already wrote in the comments to the previous question.
document.querySelector('.for').onclick = function(){
 var form = document.querySelector('.popupcontact'); // you get the element with the class popupcontact
 p.open(form.innerHTML); // take what's INSIDE it
 };

while in CSS you are all tied to the class popupcontact, but the item you do not carry, and therefore do not apply the styles.

If to move the element itself, using outerHTML for example, you do not see the form, because
.popupcontact {
 display: none; /* <-- SKIDOOSH! */
 min-height: 590px;
 padding-top: 130px;
 background: url(../img/back_foot.png) left top no-repeat;
 background-size: cover;
}


You can do something like that https://plnkr.co/edit/HLH1jwwXc29pVaAMae7m?p=preview
but it is better to discard entirely, there is also a hole for XSS.

Find more questions by tags JavaScript