Position a modal dialog window (or center it on screen)?

Photoshop UXP Plugin API
6

Just to answer the original question . . .

It can be (always) centred.

Here is a screen recording showing a dialog being repeatedly opened, moved and closed. The significant thing is that whenever it is opened it is centred in the screen.

Like @ddbell my dialogs had been (weirdly) defaulting to a position bottom left of the screen. I had assumed it was just one of those uxp bugs until @Tristan gave us code (above) that reliably centres a modal dialog.

I have done some further testing and found a number of things in the code that can cause the dialog to default to a bottom left position:

(1) It might be obvious, but the dialog (before being shown) must be in the document body (not nested anywhere else).

In the code for my test plugin, I have this in my index.html file:

<body>
	<uxp-panel panelid="dialogsPanel">
		<sp-action-button-group>
			<sp-action-button size="s">Open Centred Modal</sp-action-button>
		</sp-action-button-group>
	</uxp-panel>
	<dialog data-id="centred-modal-dialog">
		<sp-button variant="cta">Close Me</sp-button>
	</dialog>
</body>

The dialog is in the body tag and outside the uxp-panel tag. (If you’re programmatically creating the dialog, you need to append the dialog to the document body as in @Tristan’s code: document.body.appendChild(modal);)

(2) and (3) There seem to be two things that need to be set in passing options to the showModal function. This is what I have in my code:

const centredModalDialog = document.querySelector('dialog[data-id="centred-modal-dialog"]');
centredModalDialog.id = window.crypto.randomUUID();
centredModalDialog.showModal(
	{
		resize: "both", // required (cannot be "none")
		size: {
			width: 258,
			height: 258 // required (must be 258 or greater)
		}
	}
)
.then((response) => {
	console.log(response);
})
.catch((error) => {
	console.log(error);
});

Again, @Tristan had discovered that having a small number in the height causes the dialog to appear bottom left. The magic number is 258! Lower than 258, the dialog appears bottom left; 258 or higher, the dialog appears centred.

Edit Nov 22 – Based on a little further experimentation, it seems there may not be just one single magic number. InDesign especially seems to need a higher number on different computers. I’m guessing there is some calculation going on, perhaps based on screen size or chosen display settings.

The other requirement is that the resize property has to be set to “both” – it can’t be set to “none”. (You can give the dialog minSize and maxSize values identical to the size values if you don’t want any resizing.)

The final piece of the jigsaw is causing Photoshop or InDesign (this works the same in both applications) to centre the dialog each time it is opened (irrespective of whether or not the user has previously moved the dialog).

The solution to this I owe to @pedro who discovered that changing the id of the dialog before it is opened triggers the application into treating the dialog as a new dialog to be positioned in its default position (i.e. centred):
https://forums.creativeclouddeveloper.com/t/indesign-modals-are-not-dimensioned-as-expected/7424

So, in my html file I have given my dialog a data-id attribute (so that I can reference it with document.querySelector()) but not an id attribute. Then, in my javascript code (above) before showing the dialog I assign it a random id:
centredModalDialog.id = window.crypto.randomUUID();.

Philip

3 Likes