How do I make a close button when I use a <$reveal> widget for a popup?

#1

I have a sticky popup using the tc-popup-keep class. I would like to have a “close” button to close it. How do I do that?

<$button popup="$:/SamplePopupState">
Analog Clock
</$button>

<$reveal type="popup" state="$:/SamplePopupState">
<div class="tc-drop-down tc-popup-keep" style="position: fixed; top: 10px; right: 10px; bottom: 10px; left: 10px;">

<$button class="tta-close-pupup">
{{$:/core/images/close-button}}
</$button>

{{$:/TiddlyTools/Clock}}

</div>
</$reveal>
#2

A popup (even one with tc-popup-keep) is automatically closed just by clicking anywhere outside the popup.

However, if you want to also have a button inside the popup that manually closes the popup, use $action-deletetiddler to delete the state tiddler, like this:

<$button class="tta-close-pupup">
{{$:/core/images/close-button}}
<$action-deletetiddler $tiddler="$:/SamplePopupState"/>
</$button>

-e

1 Like
#3

Thanks.

That did the trick.