Великолепное всплывающее окно не отображается на мобильном телефоне - PullRequest
Новая
       17

Великолепное всплывающее окно не отображается на мобильном телефоне

0 голосов
/ 24 февраля 2020

Я пробовал искать и пробовал несколько предложений, но ни одно из них не помогло мне. Все нормально на P C, но не отображается на мобильном телефоне:

// JS file 

// Inline popups for text

    $('#inline-popups').magnificPopup({
      fixedBgPos: true, 
      fixedContentPos: true,
      delegate: 'a',
      removalDelay: 0, //delay removal by X to allow out-animation
      callbacks: {
        beforeOpen: function() {
           this.st.mainClass = this.st.el.attr('data-effect');
        }
      },
      midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
    });

// HTML (триггер) 

<ul id="inline-popups">
      <li class="nav-item"><a href="#magnificent-id" class="nav-link" data-effect="mfp-zoom-in">Open modal</a></li>                        
 </ul>

// HTML (содержимое) 

<div id="magnificent-id" class="white-popup mfp-with-anim mfp-hide">
        You may put any HTML here. This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.
    </div>

... по какой-то причине анимация не воспроизводится .

// CSS

.mfp-zoom-in {

  /* start state */
  .mfp-with-anim {
    opacity: 0;
    transition: all 0.2s ease-in-out; 
    transform: scale(0.8); 
  }

  &.mfp-bg {
    opacity: 0;
      transition: all 0.3s ease-out;
  }

  /* animate in */
  &.mfp-ready {
    .mfp-with-anim {
      opacity: 1;
      transform: scale(1); 
    }
    &.mfp-bg {
      opacity: 0.8;
    }
  }

  /* animate out */
  &.mfp-removing {

    .mfp-with-anim {
      transform: scale(0.8); 
      opacity: 0;
    }
    &.mfp-bg {
      opacity: 0;
    }

  }

}

Я использую Великолепные всплывающие окна v1.1.0 и jQuery v3 .4.1

Буду признателен за любую помощь.

...