Adding HTML & CSS to dialog box

The dialog module can actually support custom HTML and CSS. Although this customization is not always necessary, it can provide a helpful way to prioritize or organize information. We put our custom HTML/CSS in the message key of the options object.

The code snippet and corresponding dialog box is given below.

var options = {
    title: 'CHOOSE YOUR SIDE:',
    message: '<div style="color:green;"><b>Which OS will you choose?</b></div><br><br> \\
    <div style="color:red; background-color:black; padding:10px; border-radius:10px;"><b>• MacOS<br>• Windows<br>• Linux</b></div>',
    buttons: [
        { label: 'MacOS', value: 1 },
        { label: 'Windows', value: 2 },
        { label: 'Linux', value: 3 }
    ]
};

Leave a comment

Your email address will not be published. Required fields are marked *