Making a Custom Modal

A guide on how to make a custom modal in a Plugin. NOTE: This guide is unfinished.

Objective

Make a tabbed modal that shows a random picture on one tab and a notes pane on the other tab on a Plugin.

Prerequisites

A basic knowledge of JavaScript is required. If you don't know it, JavaScript.info is a good place to start.
You will also need a working plugin which can be made in this Guide.

Setting Up

You can use an existing Script or create a new Script. Either way, the Script's type must be "domloaded".

Writing the Code

Building the Modal

Writing a modal from scratch is complicated and boilerplatey. The DRC API simplifies this a lot. Insert this code to the end of your Script. const myModal = DRC.Modal.buildModal("", "My Modal", "");
This creates a new empty modal with the title of "My Modal".

Building the Tabs

Then, we need to make the tabs. function (id: string, content: { content: string, name: string }[], parent: HTMLElement) DRC.Modal.buildTab("", [ { content: "<img src=\"<>\">", name: "Image" } ], myModal); const myModal = DRC.Modal.buildModal("aUniqueId", "My Modal", "");
This creates a new empty modal with the ID of "aUniqueId" and title of "My Modal".

Completing

You created your own Plugin! Restart Deeeep.io Reef Client to see the plugin in action.