HTML Code Popup

1

Hello,
I would like to do more with Grav and I am busy learning. Default Grav installation 1.7.29.1 and Quark Theme.
New page (Administration Panel) - Pages - add Page “Page Template Default” and the following HTML code:

<button class="trigger">Click here to trigger the modal!</button>
<div class="modal">
    <div class="modal-content">
        <span class="close-button">&times;</span>
        <h1>Hello, I am a modal!</h1>
    </div>
</div>

The button is displayed but a click on it does not open the content?!

2

@judie, May I presume you’re trying the sample from tutorial How To Create a Modal Popup Box with CSS and JavaScript - Sabe.io?

To complete the tutorial:

  • You also need to copy the styling between tags <style>...</style
  • And you need to copy the javascript between tags <script>...</script>

Only then, the modal can work…

However… The styling for the modal is colliding with the styling provided by theme Quark which also provides styling for class modal and sets its style to display: none;

Quick fix: Replace modal with mymodal everywhere and it should work.

3

Hello,
still many attempts (about 100) I have it running :upside_down_face:.
Immediately packed into the “custem.css” - Okay THANKS
And two questions:

  1. is there also a “plugin” for this?
  2. in the opened popup should be a longer text, this should be able to scroll - how does that work?
4

@judie,

I have it running

Nice! Please mark the questions as being solved by ticking the ‘solution’ icon in the lower-right corner of the reply that lead you to the solution.

  1. is there also a “plugin” for this?

It’s common on forums that users are expected to try to solve the question by themselves first… :wink: Try searching for “modal” on Plugins | Grav CMS

  1. in the opened popup should be a longer text, this should be able to scroll - how does that work?
  • In general, new questions should be asked in a new post with a new descriptive title.
  • However, this question is not Grav related and is about basic css. There are better fora to ask these questions.
    You might be lucky searching on StackOverflow using modal scroll overflow