Render modal from theme client-side plugin API

support
4

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

First you require show-modal

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

And then use

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 and render the modal when it’s clicked like so

<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

So, for example this

<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
71274×791 84.4 KB

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?

7 Likes