Використання модального (спливаючого) вікна

$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;
}

$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;
}

//=== 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);

//=== 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;
}

$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);
}

$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);
}

$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);
}

$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));
}

$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));
}

$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));
}