Use modals to navigate while saving your place in the original tiddler

#1

Hi all

I imagine some would find modals annoying. But for this use case it is great.

I want users who are not used to TiddlyWiki to open modals instead of links. That way, they don’t lose their place as they read longer indexes and outlines and lists that lead to additional content.

The example is in Spanish, but just click on one of the modal buttons to open a modal to a secondary index, then again to open actual content. Click cerrar (close) to return to the previous tiddler.

Spanish materials for Mark’s Gospel (with portals)

#2

Thank you, Dave.

I was hoping someone would post a simple example to get new users (me) started:

1 Create the pop-up.

  • Have a message in the text area.
  • Include a close button.
  • Name it and tag it accordingly.

2 Create the button (in another tiddler).

#3

  1. Create the parent tiddler where the modal button will be placed, and write the child tiddler that will be displayed as a modal.

  2. Create a macro with the modal included.

Title: $:/yournamehere/macros/modal
tags: $:/tags/Global
text:

\define modal(tid) @@.donotprint &nbsp;<$button class="tc-btn-invisible" message="tm-modal" param="$tid$">^^{{$:/core/images/open-window}}^^</$button> @@
  1. Create a stylesheet tiddler for the donotprint style

Title: $:/yournamehere/Stylesheets/DoNotPrint
tags: $:/tags/Stylesheet
type: text/css
Text:

@media print
{    
    .donotprint *
    {
        display: none !important;
    }
}
  1. Create an editortoolbar button tiddler

Title: $:/yournamehere/EditorToolbar/Modal
tags: $:/tags/EditorToolbar
condition: [<targetTiddler>!has[type]] [<targetTiddler>type[text/vnd.tiddlywiki]]
icon: $:/yournamehere/images/Modal
text:

<$action-sendmessage $message="tm-edit-text-operation" $param="wrap-selection" prefix=`<<modal "` 
suffix=`">>` />
  1. Create an image tiddler for the editor toolbar button

Title: $:/yournamehere/images/Modal (must be the same as the icon tiddler from step 4)
Text: Modal+

  1. Now go to your parent tiddler. Insert the modal macro in the parent tiddler where desired, using the Modal+ button in your editor toolbar. Write or paste the name of the child tiddler in between the quote marks in the macro.

  2. Save parent tiddler and click on the modal button to see the child tiddler in a modal. Click ‘Close’ to close modal.

  3. Thanks to the do not print stylsesheet, the modal button will not print if you decide to print the parent tiddler.

#4

Thank you for the instructions.

However, I can’t get it to work.

1 Tiddler: “$:/yournamehere/macros/modal”
title: $:/yournamehere/macros/modal
tags: $:/tags/Global
text: \define modal(tid) @@.donotprint &nbsp;<$button class="tc-btn-invisible" message="tm-modal" param="$tid$">^^{{$:/core/images/open-window}}^^</$button> @@

2 Tiddler: “$:/yournamehere/Stylesheets/DoNotPrint”
title: $:/yournamehere/Stylesheets/DoNotPrint
tags: $:/tags/Stylesheet
type: text/css
text: @media print { .donotprint * { display: none !important; } }

3 Tiddler: “$:/yournamehere/EditorToolbar/Modal”
title: $:/yournamehere/EditorToolbar/Modal
tags: $:/tags/EditorToolbar
type:
text: <$action-sendmessage $message="tm-edit-text-operation" $param="wrap-selection" prefix=<<modal “ suffix=”>> />

4 Tiddler: “$:/yournamehere/images/Modal”
title: $:/yournamehere/images/Modal
tags:
type:
text: Modal+

However, I really appreciated the help. Thank you.

#5

The fields in your “step 3” are incorrect… it needs condition and icon fields, like this:

3 Tiddler: “$:/yournamehere/EditorToolbar/Modal”
title: $:/yournamehere/EditorToolbar/Modal
tags: $:/tags/EditorToolbar
condition: [<targetTiddler>!has[type]] [<targetTiddler>type[text/vnd.tiddlywiki]]
icon: $:/yournamehere/images/Modal
text: <$action-sendmessage $message="tm-edit-text-operation" $param="wrap-selection" prefix=<<modal “ suffix=”>> />

-e

#6

The condition and icon fields were in my step 4 but not in his step 3. Thanks for sorting that out for him. Blessings.

#7

Thanks, Eric, thanks Dave.
I tried it. I have four new system tiddlers. I was really hoping it would work.
But thank you both, anyway. I appreciate the time.

1 Like
#8

Alfie don’t give up yet!

Download the attached json file. Then from your computer, drag to your TiddlyWiki file and import. Now you should see an Info+ button in your editor toolbar. Click it and hopefully a <<moreinfo "">> should appear in the tiddler being edited. In the “” type or paste the name of an existing tiddler Save, then you should see a modal button. Click that and your other tiddler should appear in the modal. If not, I don’t know what to tell you!

tiddlers.json (1.1 KB)

#9

Worked! Thank you!
Now I realise where I got lost.

Now, don’t you think that the “+Info” button should be a feature in the core of TW?

Anyway, thanks to both of you. I really like it.

#10

Here is an English version with a few extra bells and whistles to it! Including a glossary done as a list-search that incorporates modals.

Check it out and I think you will see what I am trying to do with it. It is a liberating way to read and write.

https://giffmex.org/experiments/.write.html

1 Like