Как открыть на сайте в анимированном окне файл из той же папки?

Question

[lordprettyflackoo]

у меня простой интерактивный сайт для диплома,

spoiler

это 3 кнопки, после нажатия на любую выдает окошко с пустым фоном, на него надо засунуть как-то другой файл, который у меня есть.

spoiler

должно получиться так, но у меня просто пустой фон, а как на этот фон поместить собственно файл? код кнопок прилагаю:

spoiler

<div class="portfolio" id="portfolio">
        <div class="container">
          <h2 class="section-header">Организации профсоюзов Республики Калмыкии</h2>
          <div class="row">
            <div class="col-md-4">
              <div class="portfolio-block">
              <img src="img/portfolio/1.jpg" alt="Работа №1">
              <a class="link cd-modal-trigger" data-work="work-1.html" href="#0">Официальный сайт</a>
              </div>
            </div>
            <div class="col-md-4">
              <div class="portfolio-block">
              <img src="img/portfolio/2.jpg" alt="Работа №2">
              <a class="link cd-modal-trigger" data-work="work-2" href="#0">ПРОФСОЮЗ РАБОТНИКОВ СВЯЗИ РК</a>
              </div>
            </div>
			
            <div class="col-md-4">
              <div class="portfolio-block">
              <img src="img/portfolio/3.jpg" alt="Работа №3">
              
              <a class="link cd-modal-trigger" data-work="work-3" href="#0">ПРОФСОЮЗ РАБОТНИКОВ ЗДРАВООХРАНЕНИЯ</a>
              </div>
            </div>
          </div>
        </div>
      </div>

Вообщем у меня есть фото как есть и как надо сделать, никак не могу понять, если надо выложу весь код полностью

Comments

[Ankhena]

Я уже прочитала вопрос до того, как вы меня сюда позвали.
Но что-то с догадливостью сегодня.

Что значит пустой фон? И что вы имеете в виду под "на этот фон поместить собственно файл"?

если надо выложу весь код полностью

Это будет разумно. Вот сюда: jsfiddle.net

[lordprettyflackoo]

Ankhena, https://jsfiddle.net/zwqs6yen/1/
я имею ввиду, что мне надо отобразить в модальном блоке содержимое другого документа
сейчас так:

spoiler

а должно быть так :

spoiler

прошу прощения если что-то не так написал

[Ankhena]

lordprettyflackoo, не вполне понятно зачем.
Но для этого служит тег iframe https://webref.ru/html/iframe

[WapSter]

lordprettyflackoo, это не код, а кусок вырванного чего-то там . Песочницы нужны, что бы показать нам результат своей работы. Чем раньше это сделаешь, тем быстрее ответят. В общем вопрос не ясен из чего ты там хочешь сделать, что-то там.

[lordprettyflackoo]

Ankhena , WapSter , извиняюсь за свою безграмотность
https://jsfiddle.net/zwqs6yen/2/
я исправил, только без картинок, но вроде все так
а суть что при нажатии на " Официальный сайт" откроется блок, на котором должен быть файл https://jsfiddle.net/zwqs6yen/3/

[Ankhena]

lordprettyflackoo, я уже написала, чтобы на одной странице открыть другую, нужен тег iframe. Как им пользоваться написано по ссылке.

Зачем вы делаете это в разных файлах, а не напишете в одном и просто не откроете модалку с нужной инфой - я не знаю.

[lordprettyflackoo]

Ankhena, мне это надо для интерактивности, iframe как я понял просто на странице создает отдел с документом

Зачем вы делаете это в разных файлах, а не напишете в одном и просто не откроете модалку с нужной инфой - я не знаю.

я не знаю как это сделать

[Ankhena]

lordprettyflackoo,

мне это надо для интерактивности

Что?

Будет проще, если спустя десяток комментариев вы нормально опишете всю задачу.
Что именно вы подразумеваете под интерактивностью?
Почему для этого нужен отдельный файл?

Может, вам vue.js или его друзей поизучать?

[lordprettyflackoo]

Ankhena, мне надо сделать интерактивный web сайт для диплома, на сайте имеется 3 главные кнопки, нажимая на каждую выдает анимированное темное окошко на котором должна быть информация как на картинках сверху где до/после, сам сайт еще раз: https://jsfiddle.net/zwqs6yen/2/
как в это самое окно засунуть https://jsfiddle.net/zwqs6yen/4/ эти ссылки и картинку? Оно у меня в отдельном файле и я думал можно файл сразу туда указать. Если без отдельного файла то как мне это сделать?

[Ankhena]

lordprettyflackoo, Это делается в одном файле.
В блок пишете нужную информацию, скрываете его например через display:none. При клике на кнопку показываете.
У вас там даже есть класс modal-content намекающий на то, куда нужно размещать информацию.

[Надим]

Ankhena, читаю вашу переписку тут и мне грустно становится на душе(

lordprettyflackoo, вы хотите получить ответ, но не хотите осознать, что для понимания ответа, надо вникать/учится. Для того, чтобы создавать интерактивные модальные окна, которые исчезают и появляются при клике на кнопки, нужно знать хотя бы CSS. Изучите, как работают стили и что такое псевдо-классы, особенно обратите внимание на псевдо-класс :target - в нем кроется простой путь решить вашу задачу. Более сложный путь подразумевает использование JavaScript, но в него вы сходу вряд ли сможете вникнуть.

Материалы, которые могут вам помочь:
https://yandex.ru/search/touch/?text=%D0%BC%D0%BE%...

[lordprettyflackoo]

Надим Закиров, интерактивные модальные окна у меня работают, мне надо только информацию в них вставить

[Надим]

lordprettyflackoo, ну тогда откройте html-код ваших модалок и вставляйте себе на здоровье. В чём именно проблема то?

[Ankhena]

Надим Закиров, какой к черту :target? Извините за резкость. Но не стоит учить новичков костылям. Костыли должны быть сознательным выбором.
А то мне тоже станет "грустно на душе" ;)

Модальные окна делаются на JS.
У ТС там бутстрап уже подключен, как выяснилось в процессе. И осталось только контент вставить в нужные теги.

[lordprettyflackoo]

Надим Закиров, гениально, как же я сразу не понял, кажется проблема скоро будет решена, щас сделаю))

[Надим]

Ankhena, ну :target самый простой способ для новичка создать свои первые модальные окна. Это конечно, если говорить с точки зрения последовательного и поступательного освоения веб-технологий.

[Надим]

lordprettyflackoo, вы кстати, уточните у своего преподавателя, разрешено ли в вашем дипломном проекте использовать фреймворки.

[lordprettyflackoo]

Надим Закиров, разрешено, правда я так и не понял как писать в модальном окне, я пишу после

<div class="modal-body">
  <p>One fine body&hellip;</p>

но в окне надпись не появляется

[Надим]

lordprettyflackoo, вставлять надо внутри .modal-content

[lordprettyflackoo]

Надим Закиров, можете скинуть как вы сделали?? у меня получилось вывести текст но нажимая на любую из 3 главных кнопок показывает текст со скрина, а как сделать текст для каждой кнопки отдельно, пожалуйста?

https://jsfiddle.net/2x7L1phv/

[Надим]

lordprettyflackoo, чтобы текст был уникальной, надо сделать три разных модальных окна! Соответственно, каждая из трех ссылок должна открывать только свое модальное окно.
https://yandex.ru/search/?text=Bootstrap%203%20мод...