I have a button that pops a simple modal form. The form takes a name, description and has a save button. I am not a fan of having a button to the left of the screen, a dialog that pops in the center and having to mouse way over to complete the form. Feels disconnected and inefficient.

enter image description here

Is there a way to pop the form right above the button? Some way to connect the two so you know the form goes with the action you just executed? I've thought of using an accordion panel, etc. but I don't want the neighboring content shoved up or down the screen. Trying to keep things in place. I'd prefer the form appear over the screen, like the modal.

I guess I could use a popover tooltip but that feels like a misuse of the element.

Thoughts? Ideas? Examples?

2 Answers 2


Position Absolute Might Help You

Here is something I did recently. I had a page where there were bunch of options:

enter image description here (this is a screenshot of a particular area on the page and not the whole page)

Each of these options are, essentially, buttons. In the old design, clicking on any of these options would open up a popup, similar to yours, but with only 1 to 3 fields for the user to fill. I removed the popup and included an accordion kind of an overlay component which would slide out to reveal the small form:

enter image description here

This would not push the adjacent elements and would simply open up on a Z-Axis (z-index).

You can read more on the same here: https://www.w3schools.com/cssref/pr_pos_z-index.asp

  • This looks great! Are you using the Bootstrap accordion or did you have to create your own? Aug 3, 2018 at 14:27
  • @ConnieDeCinkoCS I was responsible for designing the mockups (in SketchApp). But based on my experience, you can do both. Create your own or use bootstrap framework.
    – Chandan
    Aug 7, 2018 at 3:47

I guess you could pop the form right over the button if you wanted to (you have to manage its coordinates) but if the issue is time I suggest that when the form open the mouse cursor's be placed in the name field so you can start typing.

I don't think you need a close button since the cross on the top is pretty straight forward, so you can just put your save button on the right side.

I'm also not sure you need a placeholder + an other help below, maybe you could put the help as a tooltip near the label.

Here is what I would do :

  • I used Sketch to do it but if you are not on Mac and you are looking for a free tool I'd suggest you Figma
    – BenDev88
    Aug 6, 2018 at 7:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.