Modal dialog in front of modular page

Support Themes & Styling
1

Hi,

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:

modal_in_modular3
modal_in_modular31217×671 195 KB

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

modal_in_modular2
modal_in_modular21173×588 372 KB

My code:

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

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

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

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

Thanks.

2

@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…

3

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.

4

@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:

image

Screen-width >= 1025:

image

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…

5

Hi,

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.