MadCap Software Forums

In user help testing, I am getting the feedback that users do not find it intuitive to click a popped-up graphic to close it--they are all looking for an X icon in the upper right corner of the pop-up frame, a Close button, or something like that. They also try clicking outside of the graphic to close it, and only figure out that they have to click ON the graphic by accident. I tried using hover instead of pop-up, but the images are large and users found the sudden appearance/disappearance of the images too disruptive.

I'm getting resounding feedback that they want want an X icon in the upper right corner of the pop-up frame or a Close button. I've been through my style sheet and the Flare help, and don't see a way to enable something like that. Any ideas how to do something like this? I'm not averse to manually editing the .CSS file if necessary. Help would be deeply appreciated.

Thanks,
Tracey

Belay that request for ideas . . . JasonSTI was able to help me figure out how to make an X icon in the upper right corner of the pop-up frame. I'm good-to-go now.

TraceyYates wrote:Belay that request for ideas . . . JasonSTI was able to help me figure out how to make an X icon in the upper right corner of the pop-up frame. I'm good-to-go now.

For the benefit of the community, would you be willing to post details about your solution?

Sure . . . it was a wonderfully elegant solution, and all credit must go to JasonSTI.

I added the following big of code to my CSS Stylesheet. The GraphicsCloseIcon.jpg is one I created and saved into my Resources/Images file (just a blue circle with a blue X in it). The .MCPopupContainer class is the one Flare uses in its Javascript, so you need to use that class for it to appear in the build. Do not rename MCPopupContainer--I renamed it when I initially added it to my .CSS file (apparently not enough coffee yet this morning), and then of course nothing worked. Once I changed the name back to MCPopupContainer, everything worked like a charm.

.MCPopupContainer::after
{
position: absolute;
top: -8px;
right: -8px;
width: 40px;
height: 40px;
display: block;
content: "";
background: #ffffff url(../../Resources/Images/GraphicsCloseIcon.jpg) no-repeat 50% 50% / 28px 28px;
border: solid 2px #b0b1b2;
border-radius: 20px;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
text-align: center;
}

This looks great in theory, but I can't get it to work. I'm assuming because I want to get the X to appear on a Glossary popup, not an image. Is that a different class that I need to be using?

Apologies for my lack of Flare knowledge.

It appears that you have added the image, but you are missing the close javascript behind it. I had a similar issue and used jquery to move a close button from the content to the header.

Sorry, I´m a bit stupid with java script WHERE I´ve to put the source? In my css file or somewhere in the flare installation program folder?

Hmm, I´ve checked a lot of variations in the stylesheet without any results.

I tried this
".MCPopupContainer:after". And also this "MadCap | MCPopupContainer:after"

But the button does not appear in the popup window.

Be interesting to see your method used.

I was able to implement the X button on popups a while back.
viewtopic.php?f=13&t=22060