Почему не передаются стили css посредством innerHTML?

Question

[Alex_87]

Здравствуйте! Не могу понять, почему не передаются стили посредством innerHTML...
На странице все стили работают, но при передачи в модальное окно, они исчезают. Создаётся впечатление, что вместо того, что выдрать весь div с классом btn (предпоследняя строчка) браузер выдирает только сам контент. Помогите пожалуйста разобраться!
Вот код:

/* Модальное окно */

    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.modal.classList.add('open');
        popup.overlay.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('.form_popup').onclick = function(){
    var form = document.querySelector('.btn');
    p.open(form.innerHTML);
   };

};

на странице:


В модальном окне:

Comments

[Сергей delphinpro]

>> Создаётся впечатление, что вместо того, что выдрать весь div с классом btn (предпоследняя строчка) браузер выдирает только сам контент.

Правильное создается впечатление
Вы сами берете именно содержимое кнопки form.innerHTML, а в переменной form у вас именно кнопка.
Кстати, почему переменная называется form, а загоняете в нее содержимое кнопки? чтобы никто не догадался? =)

[Alex_87]

Сергей, А как взять не содержимое кнопки а саму кнопку? Я же использовал
var form = document.querySelector('.btn');

[ой всё]

а зачем выдирать?
напишите весь код и показывайте его когда нужно

[Alex_87]

ой всё, Я его и показываю! Только он у меня без стилей работает! Копируется только содержимое, а не сам элемент! Помогите это исправить, если знаете как!

[ой всё]

Alex_87, зачем его копировать и зачем исправлять?
возьмите работающий пример и сделайте так же

[Alex_87]

ой всё, Какой работающий пример? Предоставьте его пожалуйста!

[ой всё]

Alex_87, любой из гугла
если я его там могу найти, то и вам ничего не мешает

[Alex_87]

ой всё, У меня хороший код, который требует небольшой доработки! Он работает, я проверял! Единственная проблема - это не применимость стилей css. Уникальность кода заключается в том, что мне не нужно думать над самими стилями. Я просто подключаю элемент который я хочу вывести и всё Прошу помочь исправить!

Answer 1

[Stalker_RED]

innerHTML получает то, что внутри вашего элемента. Для получения самого элемента есть outerHTML

var myButton = document.querySelector('.btn').outerHTML;

Comments

[Alex_87]

А что в последней строчке писать?
p.open(form.innerHTML);
P.S. Прошу помочь отредактировать мой код!

[Stalker_RED]

Alex_87,

var btn = document.querySelector('.btn')
p.open(btn.outerHTML)

[Alex_87]

Stalker_RED, outerHTML вообще не работает вообще...

[Stalker_RED]

Alex_87, вообще работает же.

Вот вам пример, где можно сравнить innerHTML и outerHTML
https://jsfiddle.net/r02j9Lfu/

[Alex_87]

Stalker_RED, Посмотрите пожалуйста на код.... Я постарался всё лишнее убрать: https://yadi.sk/d/Um4fMhWl3NRwdZ
Мне важно, чтобы стили заработали.

[Stalker_RED]

Alex_87,

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

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

outerHTML вообще не работает вообще...

он как-раз нормально работает, но в CSS

.popupcontact {
  display: none;  /* <-- BINGO !!! */
  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.

[Alex_87]

Stalker_RED, Вот доказательство, что с innerHTML тоже всё работает! https://yadi.sk/d/hKajDcEG3NSZ2b
Сейчас начну ваш код проверять!

[Stalker_RED]

Alex_87, я же не против, можете переделать и с innerHTML. Но нужно или добавлять еще один враппер, или менять стили, или чуток переписывать скрипт.

[Alex_87]

Stalker_RED, Заработало!!! Я вас прошу объяснить, эту строчку
ведь я добавляю класс open, в котором и прописано display:block

Что касается css(я понимаю, что мое изображение с этим связанно) то я вынужден был поставить
.popupcontact {
display: none;
чтобы убрать форму из страницы и показывать только в модальном окне. Но сама форма та, показывалась) Не могу понять, почему стили не работали

[Stalker_RED]

Alex_87, вы добавляете класс open к wrapper и modal. Да, вместо display = block можно добавить и к popupcontact.

Стили пропадали потому, что вы не копировали popupcontact вообще, только то что ВНУТРИ него.