# Render modal from theme client-side plugin API

**URL:** https://meta.discourse.org/t/render-modal-from-theme-client-side-plugin-api/94305
**Category:** Support
**Created:** [August 9, 2018, 12:02pm UTC](https://meta.discourse.org/t/render-modal-from-theme-client-side-plugin-api/94305 "2018-08-09T12:02:33Z")
**Posts on this page:** 1
**Showing post:** 4

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [August 14, 2018, 6:47am UTC](https://meta.discourse.org/t/render-modal-from-theme-client-side-plugin-api/94305/4 "2018-08-14T06:47:35Z")

</div>

What you need is `showModal()` and you use it like so

First you require `show-modal`

```plaintext
const showModal = require("discourse/lib/show-modal").default;

```

And then use

```plaintext
showModal("modalName") // camelCase

```

Then all you have to do is decide how to trigger it.

One way to do it is to [create a widget](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648/1#heading--4-c-7) and render the modal when it’s clicked like so

```plaintext
<script type="text/discourse-plugin" version="0.8.18">
const showModal = require("discourse/lib/show-modal").default;

api.createWidget("modal-button", {
  tagName: "button.btn.btn-primary",

  html() {
    return "Open Modal";
  },

  click() {
    showModal("avatarSelector");
  }
});
</script>

```

This creates a button. When that button is clicked, the avatar selector modal will be displayed.

You’d still need to insert that widget somewhere and you have a [few options here](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648/1#heading--4-b)

So, for example this

```plaintext
<script type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/modal-button">
{{mount-widget widget="modal-button"}}
</script>  

```

Would add the button above topic titles like so

 ![7](https://global.discourse-cdn.com/meta/original/3X/1/a/1a2dbd40d522b4ccb8c8b23f9bad016b9135cd8b.png)

While this would open the modal and everything would display nicely, you’d still need to add a few more things to make sure the functionality - like changing the avatar - works as well. I did not include those bits here because this is an example and because I’m not sure I understand what you want to achieve.

Can you please share a bit more about what you’re trying to achieve?

---

_[View the full topic](https://meta.discourse.org/t/render-modal-from-theme-client-side-plugin-api/94305)._