Страницы сайтов в модальном окне

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

Спасибо.

/forum/thread21964-1.html
instantcms.ru/addons/modal.html

Открыть просто но есть но.
1 Сходу могут не работать некоторые поля и js скрипты
2 Модальное окно из default шаблона для таких целей непригодно.

У меня есть решение goodmade.ru/instantcms2/237-avtopodgruzka-zapisei-i-prosmotr-zapisei-v-modalnom-okne.html
Но пункт 1 остаётся, возможно придётся подправлять под работу с вашими полями, js скриптами.

1 — Создайте файл get_item_modal.css


2 - Создайте файл get_item_modal.js

3 — Подключите эти два файла, например в файле main.tpl

4 - Для ссылок на запись добавьте класс get_item_modal

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

Спасибо.

Всё это делается элементарно стандартными средствами системы. Создаёте страницу сайта, которую нужно показать в ajax-окне (или запись в типе контента, как вам удобно). Далее нам нужно вызвать это модальное окно. Предположим, вы хотите чтобы в сайдбаре была кнопка, при нажатии на которую открывались правила сайта. Или что-то еще. Создаём меню, в поле ссылка указываем ссылку на содержимое ajax-окна, а в поле класс пишем ajax-modal.

Готово. Теперь при нажатии на эту кнопку у вас открывается содержимое какой-либо страницы или записи. Обратите внимание, что открывается именно содержимое, без формы комментирования.

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



При нажатии на кнопку получаем:



Ну а далее всё зависит только от вашей фантазии — можно средствами css оформить это окно как душе угодно. Но, это уже другая история.

makework, а вы гляньте на такое модальное окно на своём сайте

На мобильном оно вовсе обрезано по высоте и поле выбора города там не умещается. И вы тут стилями явно не смогли ничего сделать )
А теперь вы рекомендуете выводить в нём текст статьи ))

GoodMade, как называется тема? Как упаковать "страницу". Выбор города является страницей?

На мобильном оно вовсе обрезано по высоте и поле выбора города там не умещается. И вы тут стилями явно не смогли ничего сделать )

А надо? Вы ещë мне про окно с уведомлениям на сайте расскажите — как более 4-х уже также не умещаются в область просмотра.

А можно личную страницу в модальном окне вывести? Товар в интернет магазине?

А можно личную страницу в модальном окне вывести? Товар в интернет магазине ?

Конечно можно. Указываем ссылку users/{user.id} и также присваиваем ссылке класс ajax-modal. Получаем так



Повторюсь, вывести в модальном окне можно абсолютно всё, даже фильтр

Пример

1 — Создайте файл get_item_modal.css

 
body.modal_opened{  }
 
.getItemModal {
  display: none; 
  position: fixed; 
  z-index: 9999999; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
}
 
.getItemModal::-webkit-scrollbar {
  display: none;
}
.getItemModal {
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}
 
.getItemModal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 620px; 
  padding:20px;
  border-radius:8px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animateshow;
  animation-duration: 0.4s;
  top:50px;
}
 
.getItemModal.hidden {
      opacity: 0;
	  transition: opacity 0.7s;	  
}
.getItemModal.hidden .getItemModal-content {
      opacity: 0;
	  transition: opacity 0.4s;
 
}
 
.getItemModal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-top:5px;
  margin-right:-18px;
}
 
.getItemModal-close:hover,
.getItemModal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
 
.getItemModal-header {
  padding: 2px 10px;
  margin-top:-20px;
}
 
.getItemModal-body {}
 
.getItemModal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
 
 
@keyframes animateshow {
  from {top: -300px; opacity: 0}
  to {top: 50px; opacity: 1}
}
 
 
 
 
@media (max-width: 576px){
.getItemModal-content {
	width:400px;
	box-sizing:border-box;
}
}
 
 
 

2 - Создайте файл get_item_modal.js

 
$(document).ready(function(){
 
 
 
 
 $(document).on("click",".get_item_modal",function()
{
 
    renderGetItemModal();
	var getItemModal = $("#getItemModal");
    $(document).on("click",".getItemModal-close",function()
    { getItemModal.addClass('hidden'); setTimeout(function(){getItemModal.remove();$('body').removeClass('modal_opened');}, 500);	 });
 
	    url = $(this).attr('href');
 
	  	$('#getItemModalWrap').load(url, '', 
		 function() {
 
			 $('body').addClass('modal_opened');
			 getItemModal.show();
 
		});	
			return false;
 
}); 
 
});	 
 
 
 
 
	renderGetItemModal = function(is_title=false) {
 
	if(!is_title){
		var header = '';
	}else{
		var header = '';
	}	
 
var modalHtml = [
'',
 
'',
'×',
header,
'',
 
'',
'',
'',
 
'',
''].join('');
 
	$('#getItemModal').remove();
 
	$('body').append(modalHtml);		
 
	};
 
 

3 — Подключите эти два файла, например в файле main.tpl

4 - Для ссылок на запись добавьте класс get_item_modal

Проверил. Метод рабочий, с одним "но" модальное окно отрывается по второму клику по ссылке. Подскажите пожалуйста, почему так может быть?