Umbraco back office - Creating dialog windows

This post is a work in progress, more coming soon.

Intro:

Dialog windows are an often requirement for custom datatypes in the back office of Umbraco and for beginners, they can also be quite complicated. Once you get to know how they work and when to use them, you'll find yourself created them for more clients because they're a brilliant way of allowing clients to work with your custom data in a user friendly way.

Before we start, I assume you already know how to set up a basic property editor and already have a basic one running in a test site at least. If not, and you're curious about how to start with it, I definitely suggest that you read the official Umbraco documentation to get the basic knowledge.

And then it's just a case of hooking up your button to the function you've created in the controller with the html file, so if you haven't already, create a dialogs folder within the mypropertyeditor folder and create an html file called help.html. This file will contain the following basic code to open your dialog window: