How do I make a dialog box with custom buttons?

So, uh, I've been trying to find out how to make a dialog box with multiple custom buttons, but I couldn't find out how. BTW, this is what I'm talking about:
Screenshot 2021-04-20 12.33.04 AM
I would like to use it in a project.

A rough draft of how to make one up


The "trick" is to attach the button sprites to the main background sprite

That way, it is easy to show/hide all of them just by show/hiding the main dialog sprite


Sprite nesting

Page 10

It uses Javascript.

It would be difficult to make a custom block for it without the block looking pretty ugly, but here's the code with comments explaining what happens and how to customize your dialog box:

let box = new DialogBoxMorph(); // name it whatever you want
box.addButton('ok', 'Custom button'); /* the first input is the
                                         action, it can either
                                         be the string ok or
                                         cancel, or a jsf

                                         the second input is the
                                         label string. pretty
                                         much self-explanatory.

                                         repeat this function
                                         however many times to
                                         add the buttons*/
const addLabel = function(text, type) { // just to make it easier to do
                  let txt = new TextMorph(text);
                  //Do whatever you want with the textmorph here. make it bold etc
                  //im going to make this bold so it will replicate the snap font style
                  txt.isBold = true;
                  box['add' + type](txt);
addLabel('Body text', 'Body') // do not change the second input of these
addLabel('Heading text', 'Head');
box.fixLayout(); // required
box.popUp(; // popup box

And the result:
(Clicking 'custom button' closes it.)
I can't find a way to set the title text, but everything else works fine.

can you put it in a project?

There's a copy button at the top right of the code box thing

still, can you put it as a custom block in a project?

How should it look? As I said,

but can you still do it?

show me a picture of what you want it to look like, e.g. what the spec is

custom dialog, heading [input] body [input] $nl button names [varadic inputs], on button clicks [varadic command ring]

I couldn't find a method to set the title sadly, and the text looks a bit too bold, no idea how to fix those

You may try this dardoro&ProjectName=custom%20dialog

Wow, this is really good!
A small tip: For the costume part, you can change it to a dropdown, then do this:

Thank you so much!! :smile: But is there a way to have it be a reporter that reports the button pressed?

I don't know how, but It would probably be in an upvar

Just make a script variable before the block, then put an extra block in each of the button actions that say "set variable to ok" for ok or "set variable to cancel" for cancel etc.
And to wait until the dialog had a button pressed and closes, do "wait until variable is not 0" or something.

You need to use html for this not JS people!

Use html
< p >Text 1</ p >
< p >Text 2</ p >

I do not know if you can do html on Snap! But use the paragraphs if you can and for custom buttons use the < button >NAME</ button >

Spacing is so it does not make it blank

well you cant do html on snap, so your post is pretty much useless. (sorry!)