Как создать div ,который при его напсании в разметку вставлял определенный код?

Question

[Игорь]

<div id="page">

      <div class="menu">
        <button class="btn" type="button" id="modal_open">Заказать звонок</button>
      </div>

     
                                         

    <div class="modal-overlay" id="modal_window"
             aria-hidden="true" role="dialog"
             aria-labelledby="modal_title">

      <div class="modal-content" id="modal_holder" role="document">

          <h1 id="modal_title">Заказать звонок</h1>
          <form>
            <label for="name">Имя:</label>
            <input type="text" id="name" class="input" placeholder="Ваше имя" />

            <label for="tell">Номер телефона:</label>
            <input type="tell" id="email" class="input" placeholder="Ваш номер телефона" />

            <input type="submit" class='btn' value="Отправить" />
          </form>

        <button class="btn-close" id="modal_close" type="button" aria-label="close">
          &times;
        </button>

      </div> <!-- end .modal-content -->

    </div> <!-- end .modal-overlay -->

вот разметка html которая добавляет "кнопку" заказа обратного звонка .

Эта разметка слишком грамоздкая чтобы её вставлть каждый раз когда я хочу получить такую кнопку.

то есть я хочу просто вставив
получить такую кнопку

ЗЫ,я на ворпрессе.

Спасибо.

Answer 1

[IceJOKER]

<button class="btn" type="button" id="modal_open">Заказать звонок</button>

- вот кнопка, ее можно хоть 100 раз дублировать на странице, а вот остальное можно написать один раз(блок заказа звонка)

Comments

[romy4]

id не забыть поменять, а то лажа будет. советчики, блин

[Игорь]

romy4: какой айди поменять?

[Anton Filippov]

romy4: умник блин, зачем айди менять?

[Павел Волынцев]

romy4: Антон Ф.: Вы чего ругаетесь-то?

[Сергей]

несколько єлементов на странице с одинаковыми id чревато попоболью

[IceJOKER]

согласен с romy4 и Сергей

Answer 2

[Павел Волынцев]

Нужно прицепить к странице таблицу стилей и javascript, который создаст на странице скрытую форму диалога и покажет этот диалог по клику на элементы с определённым классом, то есть на ссылку, кнопку или даже картинку.

Пример реализации без jQuery codepen.io/copist/full/vLNEqP
Вёрстка ногой
Стилизация топором по камню
Отправка формы не работает

Зато Javascript примитивный, очень простой