Problem to open modal windows for a post and whitelistTag html

Support
1

Hello , I am part of the team “kitedor.info” with @babyfooter.

I have made a modal window on our discourse.
She is opened by clicking on a menu link in the header.

This is the HTML of the modal window in the header css section :

<!-- Modal One -->
<div class="modal1">
  <input class="modal1-open" id="modal-one" type="checkbox" hidden>
    <div class="modal1-wrap" aria-hidden="true" role="dialog">                   
    <label class="modal1-overlay" for="modal-one"></label>       
          <div class="modal1-dialog">
            <div class="modal1-header"><h2>Les News de KiteDor</h2>
            <label class="btn-close" for="modal-one" aria-hidden="true">×</label></div>
                <div class="modal1-body">...</div>
         </div>
    </div>
  </div>

I wish I could open this modal window from a post but the problem is, post does not accept this css tag :
for=“modal-one” and automatically clears it.

Here is the html that I’ve put in the post :

<label for="modal-one"><a >News</a></label>

Can you help me , it is a way to gain acceptance for = " modal -one " in a post without whatsoever erase, to force the CSS to just accept this tag for = “” .

Thank you in advance for your help and sorry for my bad english.

2

Hello , I advance a little on my problem and I think I found the solution, but I can not put in a pratique.
I need help.
All my tests are performed locally on my mac and not on the server.
I think the solution is here:
https://meta.discourse.org/t/whitelisting-some-html-tags/24280

But I don’t understand how.
I have edited the file: "/var/www/discourse/app/assets/javascripts/discourse/lib/markdown.js"
and add this line : Discourse.Markdown.whiteListTag(‘label’, ‘for’, ‘modal-one’);
But for="modal-one" disappears again in tag

I write : <label for="modal-one"><a >News</a></label> in the post
and the inspector gives that : <label><a>News</a></label>

Where I am wrong please ?

Thanks.

3

Nobody for help me ?

4

Do not manually edit files within the Docker container. Instead, write a small plugin for this as mentioned here.

1 Like
5

Thanks very mutch fefrei.
Just ,do You think my line is correct for resolve the problem in making a little plugin : Discourse.Markdown.whiteListTag(‘label’, ‘for’, ‘modal-one’); ?

6

That looks plausible :slight_smile:

Here is a similar plugin I’m using myself, for reference.

1 Like
7

No

The last parameter is a regular expression, not a string

Try /modal-one/ not in quotation marks.

1 Like
8

@fefrei and @Mittineague,
Problem solved thanks to you both.
A big thank-you.

my little plugin :
https://github.com/AlexRabolin/modal-window.git

2 Likes
10

A plugin is no longer needed to render a modal. It can be done in a theme or theme component.

More information about that here:

3 Likes