Modal dialog in front of modular page


I’m trying to convert my old site in bootstrap to grav, and I need to show a modal dialog in front of home page. In my old site was very easy, but in grav, my home page is a modular page, so the modal dialog appears into a modular section. I attach a couple screenshots for see it:

This is the modal dialog in my original site, in bootstrap:

This is the modal dialog in my new site in grav:

My code:

{% for proximo in page.header.proximos %}
  <span class=" texto-noticias">
    <i class="{{proximo.icon}}" style="vertical-align: middle"></i>

    {% if %}
      <div class="modal fade" id="{{}}" data-backdrop="false" tabindex="-1" 
            role="dialog" aria-labelledby="{{}}" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="{{}}">{{proximo.modaltitle}}</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                <span aria-hidden="true">&times;</span>
            <div class="modal-body">
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>

      <a href="#" class="cas2" data-toggle="modal" data-target="#{{}}">
          Leer más</a>
    {% endif %}
{% endfor %}

I need that modal dialog to be displayed in front of home page, not in the modular section.


@pmoreno, A kind request… Please be kind to the readers:

  • Make a question as understandable as possible.
  • Add self explanatory samples/images.
    I have no idea what the image represents.
  • Format your code snippets properly.
    I don’t think you code contains indents of 24 spaces…

If not, you might not get the desired attention you are looking for…

Good afternoon

Sorry for my explanations, I’m begginer in grav and in English language. I’ve modified the post. I hope you help me now.

Thanks, so much.

@pmoreno, I have had a look at the website you shared in our DM.

The problem seems to be related to a media query when the screen-width becomes >= 1025px. On smaller screens it works OK.

Hove a look at the screen shots below:

Screen width <= 1024:


Screen-width >= 1025:


The following is the media query causing it:

@media screen and (min-width: 1025px) {
  [data-aos^="fade"][data-aos^="fade"].aos-animate {
      opacity: 1;
      transform: translate(0); 

When I inject the following css into the page using Chrome extension ‘Stylus (beta)’
the modal seems to work fine in larger screens:

@media screen and (min-width: 1025px) {
  [data-aos^="fade"][data-aos^="fade"].aos-animate {
      transform: unset; 

Important: I have no idea what side-effects this change will have on the rest of your site… So please test!

Hope this helps…


Thanks pamtbaau, for your help in the last days. At the moment, I have not managed to make the animations work with the modal dialog. I think this is more complicated than I imagined, so I’ve decided erase all animations from the modular pages. This way everything works correctly.

I’ll continue probing.
Thanks, again.