Как сделать модальное окно на всех страниах?

Question

[kiril9011]

Здравствуйте! Есть модальное окно в интернет магазине, сейчас модальное окно вставлено код на каждую страницу, как сделать, чтобы был один код модального на всех страницах, текст один и тот же везде. Спасибо.

Answer 1

[boga-net]

Можно так. В таком случае, модальное окно будет генерироваться на каждой странице, где подключён скрипт

$('body').append('<div id="modal-window"></div>');
$('#modal-window').append('<h3>Some text</h3>');

var text = 'lorem ipsum';
$('#modal-window').append('<p>' + text + '</p>');

Можно через php - так легче всего, но тогда придётся всем HTML страницам указать расширение .php

На каждой странице добавить

<?php include '..blocks/modal-window.php';?>
А в этом файле сделать обычную разметку. И сможете менять содержимое в одном месте, а не на каждой HTML странице

https://jsfiddle.net/tLu0hnm5/2/- и так далее

Comments

[kiril9011]

вставить на каждую страницу скрипт? а то что на каждой странице код окна, убрать?

[boga-net]

kiril9011, Нет. У вас же на всех страницах подключён файл со скриптом ? Вот в скрипте сгенерируете html разметку и она будет вставляться на всех страницах. И править будете в одном месте. Я раньше делал так с .php, но сейчас лучше сделаю в js

[kiril9011]

boga-net, у меня появляется sometext а не то что в файле я написал

[boga-net]

kiril9011, да, можно будет на вскх страницах убрать разметку модального окна, и везде подключить скрипт. И он сгенерирует новый элемент. Стили для него пропишите в CSS. Только это динамически созданный элемент, так что все события нужно будет обрабатывать через on.

[boga-net]

kiril9011, у вас подключён jQuery ? Я просто показал пример, а не готовый код )
Вы знаете jquery ?

[kiril9011]

boga-net, я php, js плохо очень знаю

[kiril9011]

boga-net, ладно спасибо

[boga-net]

kiril9011,

вот это - '' - уберите кавычки и получите обычный div элемент с ID modal-window : - как обычно верстаете в HTML

$('#modal-window') - вот это - ваш контейнер.
append - добавить в этот элемент
$('#modal-window').append('Some text');
то есть в div с ID "modal-window" мы добавляем тег . В него пропишите нужный вам текст.

Представьте, что это такой конструктор, матрёшка. Сделали один тег, записали туда текст, добавили.