Need an X or Close on pop-up images

This forum is for all Flare issues not related to any of the other categories.
Post Reply
TraceyYates
Propeller Head
Posts: 61
Joined: Fri Oct 15, 2010 7:50 am

Need an X or Close on pop-up images

Post by TraceyYates »

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
TraceyYates
Propeller Head
Posts: 61
Joined: Fri Oct 15, 2010 7:50 am

Re: Need an X or Close on pop-up images

Post by TraceyYates »

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. :-)
Nita Beck
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Need an X or Close on pop-up images

Post by Nita Beck »

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?
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
TraceyYates
Propeller Head
Posts: 61
Joined: Fri Oct 15, 2010 7:50 am

Re: Need an X or Close on pop-up images

Post by TraceyYates »

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;
}
Adsy
Propeller Head
Posts: 41
Joined: Mon Nov 30, 2015 5:52 pm
Location: Brisbane, Australia

Re: Need an X or Close on pop-up images

Post by Adsy »

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.
jmcgill
Propeller Head
Posts: 20
Joined: Thu May 14, 2015 3:35 pm

Re: Need an X or Close on pop-up images

Post by jmcgill »

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.
Matze
Sr. Propeller Head
Posts: 163
Joined: Mon Jun 20, 2016 10:35 pm

Re: Need an X or Close on pop-up images

Post by Matze »

Sorry, I´m a bit stupid with java script :D WHERE I´ve to put the source? In my css file or somewhere in the flare installation program folder?
Matze
Sr. Propeller Head
Posts: 163
Joined: Mon Jun 20, 2016 10:35 pm

Re: Need an X or Close on pop-up images

Post by Matze »

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.
lguser
Propeller Head
Posts: 27
Joined: Fri Apr 04, 2014 10:11 am

Re: Need an X or Close on pop-up images

Post by lguser »

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
Post Reply