does not work initialization modal

<div id="data_modal" class="modal"> 
	<div class="modal-content"> 
		<h4>Modal Header</h4> 
		<div class="row">
			<div class="col l12">
				A bunch of text 
			</div>
		</div>
	</div> 
	<div class="modal-footer"> 
		<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat" id="save_frame">Сохранить</a> 
	</div> 
</div>

<script type="text/javascript">
	// заполняем и открываем модалочку
	function _show_data_modal(_in){
		var _elem = $('#data_modal');
		var modal = M.Modal.getInstance(_elem);
		// _elem.children('.modal-content').html('<h4>' + _in['title'] + '</h4>')
		_elem.children('.modal-content').html(_in['content']);
		modal.open();
	}
</script>

===error

Uncaught TypeError: Cannot read property ‘open’ of undefined at _show_data_modal (lm=doc_edit&did=1:183) at eval (eval at success (scripts.js?v1522782874:20), <anonymous>:1:1) at Object.success (scripts.js?v1522782874:20) at i (jquery-3.2.1.min.js:2) at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2) at A (jquery-3.2.1.min.js:4) at XMLHttpRequest.<anonymous> (jquery-3.2.1.min.js:4)

[Dogfalo]

https://codepen.io/Dogfalo/pen/xYXwoe

[dgzraul]

You can use this

Get element by ID var elems = document.getElementById('idDivModal');

The next method is OPTIONAL

With this method you can reconfigure your DIV MODAL and you can add more options

var instances = M.Modal.init(elems, { 
   opacity: 0.5
});

New instance var instance = M.Modal.getInstance(elems); instance.open(); // instance with methods