В системе EGO CRM не используются статические модальные окна, т.е. окна, которые заранее отрисованы в HTML-коде и просто скрыты до момента нажатия на кнопку открытия. Любое модальное окно отрисовывается хотя бы 1 раз в момент первого вызова модального окна. Отрисовка модального окна может происходить напрямую через js-код либо по ajax.

Сценарии для открытия модального (всплывающего) окна:

Во всех случаях работы с модальными окнами используются следующие параметры:

Дополнительно рассмотрим способы закрытия модального окна (если это необходимо в сценарии работы):

Для отрисовки кнопки открытия модального окна используется метод «btn» класса «ui::».
Методу передаётся параметр «btn_open_modal» с массивом параметров модального окна либо просто строка в качестве контента модального окна.

Самый простой пример, передаём параметру «btn_open_modal» строку - содержимое модального окна.

$args = array();
$args['btn_open_modal'] = '<p>My modal content, only string.</p>';
$args['text'] = 'Open modal';
$args['icon'] = array('window', 'far');
$str .= ui::btn($args);

В этом примере передаём параметру «btn_open_modal» массив с параметрами модального окна.

$modal_args = array();
$modal_args['body'] = '<p>My modal content.</p>';
$modal_args['header'] = 'My modal title';
$modal_args['footer'] = 'My footer';
$modal_args['size'] = 'full';
$modal_args['theme'] = 'info';
//===
$args = array();
$args['btn_open_modal'] = $modal_args;
$args['text'] = 'Open modal';
$args['icon'] = array('window', 'far');
$str .= ui::btn($args);

В этом примере в том числе используем:
- draggable: окно можно перемещать по экрану
- backdrop=FALSE: окно не закрывается при клике за пределами окна.

$modal_args = array();
$modal_args['body'] = '<p>My modal content.</p><p><input name="my_input" class="form-control"></p>';
$modal_args['header'] = 'My modal title';
$modal_args['footer'] = 'My footer';
$modal_args['theme'] = 'warning';
$modal_args['placement'] = 'right';
$modal_args['draggable'] = true;
$modal_args['backdrop'] = false;
//===
$args = array();
$args['btn_open_modal'] = $modal_args;
$args['text'] = 'Open modal';
$args['icon'] = array('window', 'far');
$str .= ui::btn($args);

То же самое, что и предыдущий пример, только добавлен параметр «oneshot» со значением TRUE.
Обратите внимание, при использовании параметра «oneshot» обязательно необходимо передать параметр «id».
Передвиньте окно в другое место. Введите какой-нибудь текст в поле в модальном окне, затем закройте его и откройте заново.

$modal_args = array();
$modal_args['body'] = '<p>My modal content.</p><p><input name="my_input" class="form-control"></p>';
$modal_args['header'] = 'My modal title';
$modal_args['footer'] = 'My footer';
$modal_args['theme'] = 'warning';
$modal_args['placement'] = 'right';
$modal_args['draggable'] = true;
$modal_args['backdrop'] = false;
$modal_args['id'] = set_id('my_modal_with_oneshot_ui');
$modal_args['oneshot'] = true;
//===
$args = array();
$args['btn_open_modal'] = $modal_args;
$args['text'] = 'Open modal';
$args['icon'] = array('window', 'far');
$str .= ui::btn($args);

Открываем модальное окно с помощью JS.
Создаём кнопку и назначаем ей обработчик. Создаём обработчик js, в обработчике используем хэлпер $$.oj_modal() с параметрами модального окна.

Обратите внимание, что хэлпер «$$.oj_modal()» возвращает jquery-объект модального окна.
Это важно в том случае, если Вам необходимо в дальнейшем произвести некую работу с объектом модального окна.
В нашем примере мы вывели объект модального окна в консоль.

$args = array();
$args['handler_click'] = 'my_open_modal';
$args['text'] = 'Open modal';
$args['icon'] = array('blinds-open', 'far');
$str .= ui::btn($args);
$$.my_open_modal = function(){
	var modal_pars={};
	modal_pars.body = 'My content in modal from js.';
	modal_pars.size = 'sm';
	var modalObj = $$.oj_modal(modal_pars);
	console.log('modalObj', modalObj);
	return true;
}
$args = array();
$args['handler_click'] = 'my_open_modal_variant';
$args['text'] = 'Open modal';
$args['icon'] = array('blinds-open', 'far');
$str .= ui::btn($args);
$$.my_open_modal_variant = function(){
	var modal_pars={};
	modal_pars.body = 'My content in modal from js.';
	modal_pars.size = 'lg';
	modal_pars.draggable = true;
	modal_pars.backdrop = false;
	$$.oj_modal(modal_pars);
	return true;
}

В данном примере в обработчике js закроем модальное окно через 1 секунду, для этого используем хэлпер «$$.oj_modal_close()».
Если никакие параметры хэлперу не переданы, будут закрыты все модальные окна.
Если же у Вас открыто несколько модальных окон и нужно закрыть только определённое, передайте хэлперу ID модального окна либо jquery-объект модального окна.

$args = array();
$args['handler_click'] = 'my_open_modal_and_close';
$args['text'] = 'Open modal';
$args['icon'] = array('blinds-open', 'far');
$str .= ui::btn($args);
$$.my_open_modal_and_close = function(){
	var modal_pars={};
	modal_pars.body = 'My content in modal from js.';
	modal_pars.theme = 'info';
	var modalObj = $$.oj_modal(modal_pars);
	setTimeout(function(){
		$$.oj_modal_close(modalObj);
	}, 1000);
	return true;
}

Контент будущего модального окна размещается в скрытом элементе HTML.
Вместо параметра «body» в массиве параметров модального окна используем параметр «body_from», которому передаём ID DOM-элемента, в котором хранится контент модального окна.

В данном примере кнопку для открытия модального окна создаём с помощью класса

My modal content from hidden block.

Выполните двойной клик для очищения поляНажмите ENTER для сохранения
//=== Hidden block with content for modal
$str .= '<div id="'.set_id('my_modal_content').'" class="d-none">';
	$str .= e_p('My modal content from hidden block.', 'mb-3');
	$args = array();
	$args['name'] = 'my_input';
	$str .= ui::input_with_save($args);
$str .= '</div>';

//=== Button
$modal_args = array();
$modal_args['body_from'] = find_ele('my_modal_content');
$modal_args['header'] = 'My modal title';
$modal_args['draggable'] = true;
//===
$args = array();
$args['btn_open_modal'] = $modal_args;
$args['text'] = 'Open modal';
$args['icon'] = array('code', 'far');
$str .= ui::btn($args);

В примере открываем модальное окно с помощью JS.

My modal content from hidden block.

Выполните двойной клик для очищения поляНажмите ENTER для сохранения
//=== Hidden block with content for modal
$str .= '<div id="'.set_id('my_modal_content').'" class="d-none">';
	$str .= e_p('My modal content from hidden block.', 'mb-3');
	$args = array();
	$args['name'] = 'my_input';
	$str .= ui::input_with_save($args);
$str .= '</div>';

//=== Button
$args = array();
$args['handler_click'] = 'my_open_modal_body_from';
$args['text'] = 'Open modal';
$args['icon'] = array('code', 'far');
$str .= ui::btn($args);
$$.my_open_modal_body_from = function(){
	var modal_pars={};
	modal_pars.body_from = $$.find_ele('my_modal_content');
	modal_pars.size = false;
	modal_pars.theme = 'secondary';
	$$.oj_modal(modal_pars);
	return true;
}

Контент модального окна формируется на сервере в коде PHP.
Кнопке назначаем обработчик.
В обработчике на сервере используем хэлпер «oj_modal()» для возврата подготовленного контента в модальное окно.

В обработчике на сервере формируем строку модального окна и передаём хэлперу «oj_modal()» массив с параметрами модального окна.

$args = array();
$args['handler_click'] = 'my_open_modal_ajax';
$args['text'] = 'Open modal';
$args['icon'] = array('server', 'far');
$str .= ui::btn($args);
public function my_open_modal_ajax() {
	$str = '';
	$str .= e_p('Modal content');
	$str .= e_p('Time: '.time());
	$header_str = mlang('my_header', 1);
	//===
	$modal_pars = array(
			'body'=>$str
		, 'header'=>$header_str
		, 'size'=>'lg'
		, 'theme'=>'primary'
		, 'draggable'=>true
	);
	oj_modal($modal_pars);
}

То же самое, только добавим параметр «oneshot».
Обратите внимание, при использовании параметра «oneshot» обязательно необходимо передать параметр «id».
Обратите внимание на Time в модальном окне после закрытия-открытия окна.

$args = array();
$args['handler_click'] = 'my_open_modal_ajax_oneshot';
$args['text'] = 'Open modal';
$args['icon'] = array('server', 'far');
$str .= ui::btn($args);
public function my_open_modal_ajax_oneshot() {
	$str = '';
	$str .= e_p('Modal content');
	$str .= e_p('Time: '.time());
	$header_str = mlang('my_header', 1);
	//===
	$modal_pars = array(
			'body'=>$str
		, 'header'=>$header_str
		, 'size'=>'lg'
		, 'theme'=>'primary'
		, 'draggable'=>true
		, 'id'=>set_id('my_modal_with_oneshot_ajax')
		, 'oneshot'=>true
	);
	oj_modal($modal_pars);
}

В обработчике на сервере формируем строку модального окна и передаём хэлперу «oj_modal()» только сформированную строку.

$args = array();
$args['handler_click'] = 'my_open_modal_ajax_only_string';
$args['text'] = 'Open modal';
$args['icon'] = array('server', 'far');
$str .= ui::btn($args);
public function my_open_modal_ajax_only_string() {
	$str = '';
	$str .= e_p('Modal content');
	$str .= e_p('Time: '.time());
	oj_modal($str);
}

Используем параметр «_close_parent_modal» в разных сценариях для закрытия родительского модального окна, в котором находится кнопка или поле с обработчиком, при выполнении обработчика.

В данном примере мы используем ajax для формирования контента модального окна.
В модальном окне создаём поле с помощью класса «ui::», в метод создания поля передаём параметр «_close_parent_modal».
Модальное окно закроется только в случае отсутствия ошибки.
Попробуйте сохранить незаполненное поле.

$args = array();
$args['handler_click'] = 'my_open_modal_close_parent_modal_1';
$args['text'] = 'Open modal';
$args['icon'] = array('eye', 'far');
$str .= ui::btn($args);
public function my_open_modal_close_panent_modal_1() {
	$str = '';
	$args = array();
	$args['name'] = 'my_input_1';
	$args['_close_parent_modal'] = true;
	$str .= ui::input_with_save($args);
	//===
	oj_modal($str);
}
public function save_my_input_1() {
	$val = ui::get_post_VAL();
	if(!empty($val)) {
		$success_text = 'VALUE: '.$val;
		//===
		ojsucc($success_text);
	}
	else ojerr(mlang('s_error__field_empty_warn', 1));
}

В данном примере мы также используем ajax для формирования контента модального окна.
Однако при создании поля для модального окна с помощью класса «ui::» параметр «_close_parent_modal» не используем.
Мы используем параметр «_close_parent_modal» в возвратном хэлпере «oj_ret()» непосредственно в обработчике сохранения поля.
Таким образом, модальное окно закроется только в случае получения инструкции на закрытие в возвратных данных после выполнения обработки.
В данном примере мы закрываем окно только в случае успешной операции.

$args = array();
$args['handler_click'] = 'my_open_modal_close_parent_modal_2';
$args['text'] = 'Open modal';
$args['icon'] = array('eye', 'far');
$str .= ui::btn($args);
public function my_open_modal_close_panent_modal_2() {
	$str = '';
	$args = array();
	$args['name'] = 'my_input_2';
	$str .= ui::input_with_save($args);
	//===
	oj_modal($str);
}
public function save_my_input_2() {
	$val = ui::get_post_VAL();
	if(!empty($val)) {
		$success_text = 'VALUE: '.$val;
		//===
		oj_ret('_close_parent_modal', true);
		//===
		ojsucc($success_text);
	}
	else ojerr(mlang('s_error__field_empty_warn', 1));
}

Всё то же самое, что и в предыдущем примере, только теперь мы используем «oj_ret('_close_parent_modal')» для закрытия модального окна в любом случае, даже при ошибке.

$args = array();
$args['handler_click'] = 'my_open_modal_close_parent_modal_3';
$args['text'] = 'Open modal';
$args['icon'] = array('eye', 'far');
$str .= ui::btn($args);
public function my_open_modal_close_panent_modal_3() {
	$str = '';
	$args = array();
	$args['name'] = 'my_input_3';
	$str .= ui::input_with_save($args);
	//===
	oj_modal($str);
}
public function save_my_input_3() {
	$val = ui::get_post_VAL();
	//===
	oj_ret('_close_parent_modal', true);
	//===
	if(!empty($val)) {
		$success_text = 'VALUE: '.$val;
		//===
		ojsucc($success_text);
	}
	else ojerr(mlang('s_error__no_data', 1));
}

Специальные параметры, аналогичные «btn_open_modal» для открытия в модальном окне медиа-файлов (аудио-, видео, текстовых и PDF) с учётом типа медиа.

Открыть картинку в модальном окне.
Мы используем те же параметры модального окна в массиве для параметра «btn_open_img» за исключением:
«body» и «body_from». Вместо них обязательно должен быть передан параметр «src» со ссылкой на изображение (о ссылках на изображения читайте в документации).

Используем кнопку, созданную классом «ui::».
Параметру «btn_open_img» передаём массив с параметрами модального окна.

$img_args = array();
$img_args['src'] = media_link('3e1861d3864ba55b27a8');
$img_args['theme'] = 'primary';
$img_args['draggable'] = true;
$img_args['id'] = set_id('my_modal_100');
$img_args['oneshot'] = true;
//===
$args = array();
$args['btn_open_img'] = $img_args;
$args['text'] = 'Open image';
$args['icon'] = array('image', 'far');
$str .= ui::btn($args);

Используем кнопку, созданную классом «ui::».
Параметру «btn_open_img» передаём только строку со ссылкой.

$args = array();
$args['btn_open_img'] = media_link('c1c3ad469424684ae939');
$args['text'] = 'Open image';
$args['icon'] = array('image', 'far');
$str .= ui::btn($args);

Используем инструкцию из ajax для открытия картинки в модальном окне, для этого в обработчике на сервере используем хэлпер «oj_img()».
В данном примере передаём хэлперу массив с параметрами модального окна.
Обратите внимание, что хэлпер «oj_img()» является условно финализирующим, т.е. по умолчанию он завершает работу скрипта и отправляет данные по ajax (exit). Для предупреждения завершения работы скрипта передайте вторым аргументом «FALSE», как это сделано в данном нашем примере, чтобы после выполнения хелпера отправить также и сообщение (ojsucc())

$args = array();
$args['handler_click'] = 'my_handler_and_open_img_3';
$args['text'] = 'Action';
$args['icon'] = array('image', 'far');
$str .= ui::btn($args);
public function my_handler_and_open_img_3() {
	$img_pars = array(
			'src'=>media_link('674f1e5c680c360b6d64')
		, 'header'=>'My image'
		, 'size'=>'lg'
		, 'theme'=>'warning'
		, 'draggable'=>true
		, 'auto_close'=>1200
	);
	oj_img($img_pars, false);
	ojsucc(true, 1200);
}

Также, как в предыдущем примере, используем хэлпер «oj_img()».
Однако в данном примере передаём хэлперу только ссылку на картинку.

$args = array();
$args['handler_click'] = 'my_handler_and_open_img_4';
$args['text'] = 'Action';
$args['icon'] = array('image', 'far');
$str .= ui::btn($args);
public function my_handler_and_open_img_4() {
	oj_img(media_link('011ab21242e86e7d7635'));
}

Открываем картинку непосредственно из JS-кода.
Для это в JS-обработчике используем хэлпер «$$.oj_img()».
Хэлперу, по аналогии с предыдущими примерами, можно передать объект с параметрами модального окна либо только ссылку на картинку.

$args = array();
$args['handler_click'] = 'my_open_img_in_js';
$args['text'] = 'Open image';
$args['icon'] = array('image', 'far');
$str .= ui::btn($args);
$$.my_open_img_in_js = function(){
	var img_pars={};
	img_pars.src = $$.media_link('d0123b5368a11f8fed76');
	img_pars.theme = 'secondary';
	img_pars.draggable = true;
	img_pars.id = $$.set_id('my_modal_img_js');
	img_pars.oneshot = true;
	$$.oj_img(img_pars);
	return true;
}

Открыть видео Youtube в модальном окне.
Мы используем те же параметры модального окна в массиве для параметра «btn_open_youtube» за исключением:
«body» и «body_from». Вместо них обязательно должен быть передан параметр «src» с идентификатором видео Youtube.

Специальные дополнительные параметры.

  • Cоотношения сторон видео, параметр «aspect_ratio». В данный параметр Вы можете передать одно из следующих значений:

    «21by9», «16by9», «4by3», «1by1» По умолчанию: «16by9».

  • Параметры проигрывателя Youtube. О параметрах читайте в документации проигрывателя Youtube.

    К данным параметрам относятся:

    «youtube_autoplay», «youtube_cc_load_policy», «youtube_controls», «youtube_disablekb», «youtube_end», «youtube_fs», «youtube_iv_load_policy», «youtube_rel», «youtube_showinfo», «youtube_start»

Используем кнопку, созданную классом «ui::».
Параметру «btn_open_youtube» передаём массив с параметрами модального окна.

$youtube_args = array();
$youtube_args['src'] = 'zpOULjyy-n8';
$youtube_args['draggable'] = true;
$youtube_args['youtube_disablekb'] = true;
//===
$args = array();
$args['btn_open_youtube'] = $youtube_args;
$args['text'] = 'Open youtube video';
$args['icon'] = array('tv', 'far');
$str .= ui::btn($args);

Используем кнопку, созданную классом «ui::».
Параметру «btn_open_youtube» передаём только строку c идентификатором видео Youtube.

$args = array();
$args['btn_open_youtube'] = 'zpOULjyy-n8';
$args['text'] = 'Open youtube video';
$args['icon'] = array('tv', 'far');
$str .= ui::btn($args);

Используем инструкцию из ajax для открытия видео Youtube в модальном окне, для этого в обработчике на сервере используем хэлпер «oj_youtube()».
В данном примере передаём хэлперу массив с параметрами модального окна.
Обратите внимание, что хэлпер «oj_youtube()» является условно финализирующим, т.е. по умолчанию он завершает работу скрипта и отправляет данные по ajax (exit). Для предупреждения завершения работы скрипта передайте вторым аргументом «FALSE», как это сделано в данном нашем примере, чтобы после выполнения хелпера отправить также и сообщение (ojsucc())

$args = array();
$args['handler_click'] = 'my_handler_and_open_youtube_3';
$args['text'] = 'Action';
$args['icon'] = array('tv', 'far');
$str .= ui::btn($args);
public function my_handler_and_open_youtube_3() {
	$youtube_pars = array(
			'src'=>'zpOULjyy-n8'
		, 'header'=>'My Youtube video'
		, 'size'=>'lg'
		, 'theme'=>'warning'
		, 'draggable'=>true
		, 'auto_close'=>2500
		, 'youtube_autoplay'=>false
	);
	oj_youtube($youtube_pars, false);
	ojsucc(true, 1200);
}

Также, как в предыдущем примере, используем хэлпер «oj_youtube()».
Однако в данном примере передаём хэлперу только идентификатор видео Youtube.

$args = array();
$args['handler_click'] = 'my_handler_and_open_youtube_4';
$args['text'] = 'Action';
$args['icon'] = array('tv', 'far');
$str .= ui::btn($args);
public function my_handler_and_open_youtube_4() {
	oj_youtube('zpOULjyy-n8');
}

Открываем видео Youtube непосредственно из JS-кода.
Для это в JS-обработчике используем хэлпер «$$.oj_youtube()».
Хэлперу, по аналогии с предыдущими примерами, можно передать объект с параметрами модального окна либо только идентификатор видео Youtube.
Обратите внимание, что в данном примере мы также используем параметр «oneshot» (также обязательно должен быть передан параметр «id»), поэтому окно с видео Youtube не будет уничтожаться, а только закрываться, обеспечивая паузу в воспроизведении видео.

$args = array();
$args['handler_click'] = 'my_open_youtube_in_js';
$args['text'] = 'Open youtube video';
$args['icon'] = array('tv', 'far');
$str .= ui::btn($args);
$$.my_open_youtube_in_js = function(){
	var youtube_pars={};
	youtube_pars.src = 'zpOULjyy-n8';
	youtube_pars.id = $$.set_id('my_modal_youtube_oneshot');
	youtube_pars.oneshot = true;
	youtube_pars.theme = 'secondary';
	youtube_pars.draggable = true;
	$$.oj_youtube(youtube_pars);
	return true;
}

Открывает аудио- видео- или текстовые файлы в зависимости от их типа.
Мы используем те же параметры модального окна в массиве для параметра «btn_open_youtube» за исключением:
«body» и «body_from». Вместо них обязательно должен быть передан параметр «src» со ссылкой на файл.

Специальные дополнительные параметры.

  • * Обязательный параметр, тип медиа «media_ident». Данный параметр объясняет скриптам, каким образом открывать данный файл. Используйте один из следующих типов:

    • audio: открыть для проигрывания аудио-файл
    • video: открыть для просмотра видео-файл
    • text: открыть для просмотра текстовый файл
    • pdf: открыть для просмотра файл PDF

Таким образом, параметру «btn_open_media» может быть передан только массив, в котором должны быть два обязательных параметра: «src» и «media_ident».

Используем кнопку, созданную классом «ui::».
В данном примере прослушиваем аудио.

$media_args = array();
$media_args['src'] = media_link('dffe554669f542d8c1d2');
$media_args['media_ident'] = 'audio';
$media_args['theme'] = 'primary';
$media_args['draggable'] = true;
$media_args['id'] = set_id('my_modal_audio');
$media_args['oneshot'] = true;
//===
$args = array();
$args['btn_open_media'] = $media_args;
$args['text'] = 'Open audio';
$args['icon'] = array('music', 'far');
$str .= ui::btn($args);

Используем кнопку, созданную классом «ui::».
В данном примере откроем текстовый файл.

$media_args = array();
$media_args['src'] = media_link('11a22a2a4488978d63a2');
$media_args['media_ident'] = 'text';
$media_args['size'] = 'lg';
//===
$args = array();
$args['btn_open_media'] = $media_args;
$args['text'] = 'Open text file';
$args['icon'] = array('file-alt', 'far');
$str .= ui::btn($args);

Используем инструкцию из ajax для открытия медиа-файла в модальном окне, для этого в обработчике на сервере используем хэлпер «oj_media()».
Обратите внимание, что хэлпер «oj_media()» является условно финализирующим, т.е. по умолчанию он завершает работу скрипта и отправляет данные по ajax (exit). Для предупреждения завершения работы скрипта передайте вторым аргументом «FALSE», как это сделано в данном нашем примере, чтобы после выполнения хелпера отправить также и сообщение (ojsucc())
В данном примере откроем pdf-файл.

$args = array();
$args['handler_click'] = 'my_handler_and_open_media_3';
$args['text'] = 'Open PDF-file';
$args['icon'] = array('file-pdf', 'far');
$str .= ui::btn($args);
public function my_handler_and_open_media_3() {
	$media_pars = array(
			'src'=>media_link('1e43b08a10407efcc57a')
		, 'media_ident'=>'pdf'
		, 'header'=>'My PDF'
		, 'theme'=>'primary'
		, 'draggable'=>true
	);
	oj_media($media_pars, false);
	ojsucc(true, 1200);
}

Открываем медиа-файл непосредственно из JS-кода.
Для это в JS-обработчике используем хэлпер «$$.oj_media()».
В данном примере откроем просмотр видео-файла.

$args = array();
$args['handler_click'] = 'my_handler_and_open_media_4';
$args['text'] = 'Open video file';
$args['icon'] = array('video', 'far');
$str .= ui::btn($args);
$$.my_handler_and_open_media_4 = function(){
	var media_pars={};
	media_pars.src = $$.media_link('a83d9e3079530dc4edc2');
	media_pars.media_ident = 'video';
	media_pars.theme = 'secondary';
	media_pars.id = $$.set_id('my_media_video');
	media_pars.oneshot = true;
	$$.oj_media(media_pars);
	return true;
}