# Injector controller: pattern for modals

**URL:** <https://discuss.hotwired.dev/t/injector-controller-pattern-for-modals/555>\
**Category:** General\
**Created:** [December 7, 2018, 10:49pm UTC](https://discuss.hotwired.dev/t/injector-controller-pattern-for-modals/555 "2018-12-07T22:49:48Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![BKSpurgeon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/bkspurgeon/32/1483_2.png) [@BKSpurgeon](https://discuss.hotwired.dev/u/BKSpurgeon)\
**Post date:** [January 21, 2021, 1:36am UTC](https://discuss.hotwired.dev/t/injector-controller-pattern-for-modals/555/6 "2021-01-21T01:36:02Z")

</div>

For those reading this now, this problem can now be simply solved with turbo-frames from the turbo-rails gem and a little bit of stimulus js.

This approach seems to work well for me:

```
# some view
<%= turbo_frame_tag "new_group" do %>
   <%= link_to "New group", new_group_path %>
<% end %>

  # groups/new.html.erb
  <%= turbo_frame_tag "new_group" do %>
    <div data-controller="modal">
         <----- insert the modal stuff here ----->
    </div>    

         <-------- If the modal is cancelled you still may want to access the form again ----->
          <%= link_to "New group", new_group__path%>
  <% end %>

```

We can initialise the modal with a simple stimulus js controller:

```
// modal_controller.js
import { Controller } from "stimulus";

export default class extends Controller {
  connect(){       
    $(this.element).modal();
  }

  disconnect() {    
	$(this.element).modal('hide'); // hide if we cancel
  }
}

```

In my case I’m using bootstrap with jQuery - so obviously you’ll want to handle that.

This allows for a complex work flow - i can create a new group within another form while still being on the same page.

I might have missed something - apologies if i have. hope this helps.

---

_[View the full topic](https://discuss.hotwired.dev/t/injector-controller-pattern-for-modals/555)._