Почему не работают стили в модальном окне?

Question

[Alex_87]

Здравствуйте! Помогите пожалуйста разобраться! Эта форма есть на сайте! У неё есть стили! Но, когда я передаю её в модальное окно, стили пропадают. Есть код:

<div class="modal"></div>
       <div class="overlay"></div>
       <div class="popupcontact">
            <div class="wrapper">
                 <div class="popupcontacttitle" id="about">Оставьте заявку сейчас и получите бесплатную консультацию!</div>
                 <form action="" method="post" class="popupform">
                     <input type="text" placeholder="Ваше имя" name="name" value="<?=$_POST['name']?>"  />
                     <span style="color:red"><?=$err['name']?></span>
                     <input type="e-mail" placeholder="Ваша почта" name="e-mail" value="<?=$_POST['e-mail']?>" />
                     <span style="color:red"><?=$err['email']?></span>
                     <input type="text" placeholder="Ваш Skype"  name="skype" value="<?=$_POST['skype']?>" />
                     <textarea name="sms" id="" cols="30" rows="10" placeholder="Ваше сообщение" value="<?=$_POST['sms']?>"></textarea>
                     <span style="color:red"><?=$err['sms']?></span>
                     <div>
                        <input type="submit" value="Оставьте заявку" />
                     </div>
                 </form>
              </div>
      </div>

/* Модальное окно */
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);
    };
}

Весь код: https://yadi.sk/d/Um4fMhWl3NRwdZ

Answer 1

[Stalker_RED]

Продублирую то, что уже писал в комментариях к предыдущему вопросу.

document.querySelector('.for').onclick = function(){
        var form = document.querySelector('.popupcontact');  // вы получаете элемент с классом popupcontact
        p.open(form.innerHTML); // берете то, что ВНУТРИ него
    };

при этом в CSS у вас все завязано на класс popupcontact, но сам элемент вы не переносите, потому и не применяются стили.

Если же перенести сам элемент, при помощи outerHTML например, то вообще не увидите форму, потому что

.popupcontact {
  display: none;  /* <-- БДЫЩ! */
  min-height: 590px;
  padding-top: 130px;
  background: url(../img/back_foot.png) left top no-repeat;
  background-size: cover;
}

Можно сделать как-то так https://plnkr.co/edit/HLH1jwwXc29pVaAMae7m?p=preview
но лучше это выбросить целиком, там еще и дыры для XSS.