User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I want to make the user feel that clicking the item will bring up more detail about it in a modal window.

share|improve this question
For one, don't use a standard link style like you use for your other links. And possibly don't use a link at all.. but like a round button with a question mark. – user39400 Feb 24 '14 at 12:06
@LowerClassOverflowian I would love it if you give me link(s) to example(s) – Alex Feb 24 '14 at 12:08
up vote 5 down vote accepted

Modal windows are quite common nowadays so the user might not but surprised to see something like that appear.

The content of the modal window is more important than the pattern itself.

  • If the content is an action, it is a common pattern to use ellipsis (aka suspension points).

enter image description here

  • If the content is just information and long, you should just use a simple link or a button.

enter image description here Clicking this button will open a modal window (it says : About the playlist)

  • If the content is just information and short : do not use a modal window, use a tooltip.

enter image description here

share|improve this answer

I don't know about the general convention but I had the same problem and used the following solution.

The link is displayed as a bootstrap button and I added the fullscreen glyphicon.

Here is the result:

enter image description here

First icon is edit and second icon is fullscreen, I hope the user will understand that by clicking on the link he will be able to edit the entity in fullscreen, in this case a modal window.

share|improve this answer

Having call to action whether it is a link or a button with "View more details" as label for example should do, modal windows are pretty ubiquitous these days, do you have any reason why you want to explicitly let the user know that clicking this will open a modal window?

This could be perceived as an unnecessary warning. If your user want to see more info, let him click and open your modal window.. no big deal :)

share|improve this answer
It's actually a table item. Additional information is impossible in my case. – Alex Feb 24 '14 at 12:16
-1. See THAT question RIGHT THERE is actually designing for the users experience! Actually mattering about the user and thinking a step ahead vor him (preparing him for what might come). I would definitely not let him click and surprise him. – uxfelix Feb 24 '14 at 17:21

Unfortunately there is no fixed standard to show that whether a link will leave the page or remain on it.

However, some websites use a link which shows a dashed blue underline when it is hovered. This may help convince your users that the action will not leave the page.

You could also provide the user with more information without taking up any screen space. Just set the title attribute of the element. This text will appear in a tooltip when the user hovers over the link. So you can explain to cautious users what will happen when they click.


a.modal-link {
  text-decoration: none;             /* Suppress the default underline */
a.modal-link:hover {
  border-bottom: 1px dashed #88f;    /* Show a light blue dashed line on hover. */


<a class="modal-link" title="Popup more information on this page">Details</a>
share|improve this answer

The best way would be have an icon accompany the URL. Off the top of my head, I know of two icons that lend themselves to representing a modal dialog:

External Link

external link icon

New Window

new window icon

You could then have a tooltip over the icon that says something to the effect of:

View more details in a modal dialog

Icons source: jQuery UI ThemeRoller

share|improve this answer
Isn't a modal dialog supposed to be contained in the current window? An external link should open a new window. – A.L Feb 24 '14 at 17:09
@n.1 - Of course. I'm not saying otherwise. I'm simply saying those 2 icons visually lend themselves to represent a modal dialog as well. – Code Maverick Feb 24 '14 at 17:24
Oh. I was going to ask "what is the icon for modal dialog?" :) – joeytwiddle Aug 7 '14 at 4:02

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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