Where to place the close button in circular modal form?

Question

Where should the close [x] button in circular modal form be placed?

Answer 1

Where users would expect it - in the top-right corner (outside the circle, near the point crossed by the normals of topmost and rightmost parts of the circle).

Alternatively, use a thin slice at the very bottom, clearly marked 'Close' (rather than [X])

Answer 2

Draw a square inside the circle and where the right-top corner touches the circle, place the big nice "X". You can put the "X" in a small circle also that comes over the content circle.

Answer 3

Two options:

1. A smaller circle abutting/joining the larger one-placed at the top right side. The form should be aligned and non-disturbing.

2. The same smaller circle at the centre right side - so it's a obvious extension of the larger circle, abutting the larger one.

If in case you intend to add the phrase "Close" both the smaller circles can be replaced by a more oblong or round rectangle that once again seamlessly matches with circle form.

Answer 4

I would suggest that you use one/both of the two below methods to go about doing what you want:

• Include a small slice which has close clearly written on it (similar to what Kai suggested). You could place this at the bottom or at the top right corner of the circle.
• You could also handle the click event for the modal area which closes the form when clicked on it. And you could display a message like 'You can also click outside the form to close' on hover of the slice that I mentioned above.

Answer 5

Most users as people said will expect to see the "x" button at right top corner but my advice is to make it visible enough.

When you see these pop ups and the "x" is not found or seeing easy it's bad and you make the visitor unhappy instant.

So choose wise the difference between colors and make it easy and clean so the visitor can see it instant.