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

  • 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
    Commented Feb 24, 2014 at 12:06
  • @LowerClassOverflowian I would love it if you give me link(s) to example(s)
    – Alex
    Commented Feb 24, 2014 at 12:08

5 Answers 5


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


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

  • Isn't a modal dialog supposed to be contained in the current window? An external link should open a new window. Commented Feb 24, 2014 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. Commented Feb 24, 2014 at 17:24
  • Oh. I was going to ask "what is the icon for modal dialog?" :) Commented Aug 7, 2014 at 4:02

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.


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 :)

  • It's actually a table item. Additional information is impossible in my case.
    – Alex
    Commented Feb 24, 2014 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
    Commented Feb 24, 2014 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>

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.