Answered
Simple example of modal dialog for UXP
Hello everyone,
I am currently trying to evaluate converting an internally used ExtendScript plugin to UXP. The plugin uses ScriptUI to display a modal configuration dialog, which is not supported any more in UXP (I think?).
I tried to use UXP to create a modal dialog, but I could not find a complete example on how to do so.
Here is what I have got so far:
index.htm:
<!DOCTYPE html>
<html>
<head>
<script src="main.js"></script>
</head>
<style>
dialog {
background-color: var(--uxp-host-background-color);
color: var(--uxp-host-text-color);
border-color: var(--uxp-host-border-color);
font-size: var(--uxp-host-font-size);
}
#sampleDialog>div {
display: flex;
flex-direction: column;
height: 300px;
width: 400px;
align-items: center;
}
#sampleDialog>div>p {
margin-top: 30px;
}
</style>
<body>
<dialog id="sampleDialog">
<div>
<h1>Well hello!</h1>
<sp-banner>
<div slot="header">Header text</div>
<div slot="content">Content of the banner</div>
</sp-banner>
<sp-button variant="primary">I'm a button</sp-button>
</div>
</dialog>
</body>
</html>js to display the dialog:
let result = await document.getElementById("sampleDialog").show();This does display a dialog with a fixed width, and gray text on gray background that is not readable. Furthermore, there is no visible button:
Is there anything I am missing? Do I need to include a special stylesheet?
Thanks in advance!
Best regards,
Christoph
AdChoices