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
Need an X or Close on pop-up images
-
- Propeller Head
- Posts: 61
- Joined: Fri Oct 15, 2010 7:50 am
-
- Propeller Head
- Posts: 61
- Joined: Fri Oct 15, 2010 7:50 am
Re: Need an X or Close on pop-up images
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.
-
- 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
For the benefit of the community, would you be willing to post details about your solution?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.
Nita
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
-
- Propeller Head
- Posts: 61
- Joined: Fri Oct 15, 2010 7:50 am
Re: Need an X or Close on pop-up images
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;
}
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;
}
Re: Need an X or Close on pop-up images
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.
Apologies for my lack of Flare knowledge.
Re: Need an X or Close on pop-up images
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.
Re: Need an X or Close on pop-up images
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?
Re: Need an X or Close on pop-up images
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.
I tried this
".MCPopupContainer:after". And also this "MadCap | MCPopupContainer:after"
But the button does not appear in the popup window.
Re: Need an X or Close on pop-up images
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
I was able to implement the X button on popups a while back.
viewtopic.php?f=13&t=22060