textarea Outputting "js" in Non-Editable Textarea

[louisstephens]

So, I am not even sure if this is possible, but I thought I would ask anyway. I was building a "system" that would make some modals (izimodal) using a few fields. A user would select the color combo they want, enter a title, fill out the body, and then I was going to pass this (in the template) to fill in the modal. I have this all working pretty flawlessly.

<div id="example-modal" class="model" data-izimodal-autoopen data-izimodal-transitionin="fadeInDown"  data-izimodal-iframeURL="<?php echo $page->example->url; ?>"></div>


<script type="text/javascript">
 
  $("#ca-entrance-modal").iziModal({
		title: 'Custom Title Here',
   		subtitle: '',
   		headerColor: 'Custom Color Here',
	    history: false,
    	iframe : true,
    	fullscreen: false,
    	loop: false,
    	width: 350,
		iframeHeight: 350,
   		top: null,
   		bottom: null,
   		borderBottom: false,
		closeButton: true,

  });

</script>

However, I have hit a road block. The modals are using iframes to pull in the corresponding modal page, but the javascript options are not being iframed (so the modal will actually launch etc). My thought was the user can just copy the page link to the modal, and insert it into the iframe and simply adding the js code, the modal would work (which it does).

I guess here is my actually problem. Since the user is selecting several options to "customize" the modal, the javascript is custom and differs between each modal. Is there a way to "disable" a textarea, and output the "custom" javascript inside the textarea so they can copy it for inclusion on their actual pages?

 

Or, is this something that I should just output in the frontend view for users.