amp-lightbox открыт на другом amp-lightbox закрывает оба - PullRequest
Новая
       83

amp-lightbox открыт на другом amp-lightbox закрывает оба

0 голосов
/ 14 июля 2020

Я пытаюсь открыть amp-lightbox при нажатии на другой amp-lightbox. но это приводит к закрытию их обоих. может ли кто-нибудь предложить мне способ открыть их один над другим и закрыть их аналогичным образом? 

  <div>
    <amp-lightbox id="my-lightbox" layout="nodisplay">
      <div class="lightbox" on="tap:my-lightbox-1" role="button" tabindex="0">
        <h1>First Light box</h1>
      </div>
    </amp-lightbox>
    <amp-lightbox id="my-lightbox-1" layout="nodisplay"role="button" tabindex="1">
      <div class="lightbox">
        <h1>Second Light box</h1>
      </div>
    </amp-lightbox>
    <button on="tap:my-lightbox">
      Open lightbox
    </button>
  </div>

Это происходит потому, что первый лайтбокс теряет фокус и, таким образом, закрывает его, и поскольку родитель закрывает и повторно отображает дочерний amp-lightbox? также, можно ли сделать это с помощью css вместо использования amp-lightbox

1 Ответ

2 голосов
/ 16 июля 2020

Используйте вот так 

<div>
    
    <amp-lightbox id="my-lightbox" layout="nodisplay">
      <div class="lightbox">
        <button on="tap:my-lightbox.close,my-lightbox-1.open">
            Open Second lightbox
          </button> 
          <button on="tap:my-lightbox.close">
            Close first lightbox
          </button>
        <h1>First Light box</h1>
      </div>
    </amp-lightbox>

    <amp-lightbox id="my-lightbox-1" layout="nodisplay">
      <div class="lightbox">
        <button on="tap:my-lightbox-1.close,my-lightbox.open">
            Close Second lightbox
          </button>   
        <h1>Second Light box</h1>
      </div>
    </amp-lightbox>


    <button on="tap:my-lightbox.open">
      Open first lightbox
    </button>
  </div>

Рабочий пример НАЖМИТЕ ЗДЕСЬ

...