---
title: Add a Modal from a Redactor Field in Craft CMS
date: 2021-08-09T10:14:00-04:00
author: cc_admin
canonical_url: "https://caffeinecreations.ca/blog/add-a-modal-from-a-redactor-field-in-craft-cms/"
section: Blog
---
- [Code](https://caffeinecreations.ca/blog/category/code/), [Tutorial](https://caffeinecreations.ca/blog/category/code/tutorial/), [CraftCMS](https://caffeinecreations.ca/blog/category/craftcms/), [Craft Tips](https://caffeinecreations.ca/blog/category/craftcms/craft-tips/)
# Add a Modal from a Redactor Field in Craft CMS
I had a client request that they be able to add a modal pop-up to content with a form from their CRM within a redactor field. There is no out of the box way to do this, but it's not difficult.
I did this by using the `formattingAdd` option in the redactor Config file, using the Retcon plugin to add Alpine Js Attributes to the pop-up trigger text and a new field to hold the pop-up content.
In the redactor config file add the following to formattingAdd which will then create an a link with a class of open-popup. I wanted to use a span, however on saving the trigger text blends in with the regular text even when using the style attribute below.
```
```javascript
"Form Pop-up": {
"title": "Form Pop-up",
"api": "module.inline.format",
"args": {
"tag": "a",
"class": "open-popup",
"type": "toggle",
"style": {
"color":"blue"
}
}
},
```
```
In order to get the trigger text to open the modal I needed to add some Alpine Js directives which I was unable to get to work with the redactor config above. Instead I used the [Retcon plugin](https://plugins.craftcms.com/retcon) which I am already using on this site.
Additionally the rich text field and pop-up code need to be wrapped in a div with these alpine js `attributes x-data="{ 'isPopupOpen': false }" @keydown.escape="isPopupOpen = false"` To get the alpine directives added use this code and replace` block.copy` with the name of your redactor field.
On thing to note is that the Retcon plugin does not like the @ character which means that `@click` will create errors. In this case just use the longer option in Alpine `x-on:`
```
```twig
{{ block.copy | retcon([
['attr', 'h2 + h3', { class: 'h3-big' }, false],
['attr', 'span.open-popup', { class: 'text-blueBrand-dark cursor-pointer font-bold', 'x-on:click':'isPopupOpen = true' }, false],
]) }}
```
```
Next I added a field for the pop-up content to be entered. For my client this is a form that is created in their CRM. and then place that code in the template.
```
```twig
{# check if popup is in use #}
{% if block.popUp is defined and block.popUp|length %}
{#
use retcon to add an alpine directive 'x-on:click'
to close the mobile on submit
#}
{{ block.popUp|raw| retcon([
['attr', 'input[type="submit"]', { class: '', 'x-on:click': 'isPopupOpen = false' }, false]
]) }}
{% endif %}
```
```
The full code for this matrix block is in this [text file](https://caffeinecreations.ca/uploads/blog/redactor-popup.txt).
### Video Demo
## Related Articles
[### Reactive Pagination With Sprig and Craft](https://caffeinecreations.ca/blog/reactive-pagination-with-sprig-and-craft/)
[### Creating a Simple Job Board in Craft CMS](https://caffeinecreations.ca/blog/creating-a-simple-job-board-in-craft-cms/)
[### Grouping Entries by First Letter of Last Name](https://caffeinecreations.ca/blog/grouping-entries-by-first-letter-of-last-name/)