Наложение с несколькими записями - PullRequest
Новая
       27

Наложение с несколькими записями

0 голосов
/ 14 марта 2019

Я новичок, когда дело доходит до Javascript, поэтому, скорее всего, это будет простое исправление.

Так что я следовал учебнику, найденному здесь Полноэкранное наложение

Я удалил HTML и CSS и изменил код в соответствии с моим собственным дизайном.У меня есть то, что я хочу работать с моим дизайном.

Вот сгенерированный код. 

<div class="treatment_container">
    <div class="treatment">
        <img src="https://source.unsplash.com/random/384x416" alt="" />
        <div class="treatment-content">
            <h2>Anxiety</h2>
            <p>Anxiety takes many forms. Whilst some are obvious, others are kept under the radar. We will all have feelings of anxiety at some time in our lives, but for many of us it’s inconsequential and short-lived. When anxiety escalates, slowly or quickly, it can become severe and take over your life, leading to negative thinking, lack of self-worth or the inability to cope.</p>
            <button id="trigger-overlay" type="button">MoreInfo</button>
        </div>
    </div>  
</div>
    <!-- open/close -->
<div class="overlay overlay-contentscale">
    <button type="button" class="overlay-close">Close</button>
    <div class="content">
        <p><strong>How I can help:</strong> I guide you to focus on what and where you want to be. We don’t talk about problems or past experiences, we find solutions that create positivity and self-confidence.</p>
    </div>
</div>

Отлично работает, как в примере в учебной ссылке.Отлично.

Однако .....

Я создаю это для веб-сайта, который будет отображать 13 итераций этого примера кода.В основном это окно обработки с полноэкранным наложением содержимого.

Когда я дублирую этот код, эффект наложения срабатывает только на первом.

Теперь я знаю, что это связано с поиском Javascript.конкретный контейнер для стрельбы JS.И я знаю, что если бы я дал каждому ящику свой селектор цели, я мог бы выбрать их все по отдельности, и это должно работать.

Однако, после работы это будет закодировано в тему Wordpress, которая будет использоваться в CMS веб-сайтов.

Так что жесткое кодирование различных идентификаторов селектора в JS не сработает.

Есть ли способ заставить следующий код JS работать для каждого блока, в то время как только для кнопки, которая вызывает каждыйоверлей ?????

Вот код JS 

(function() {
var container = document.querySelector( 'div.treatment_container' ),
    triggerBttn = document.getElementById( 'trigger-overlay' ),
    overlay = document.querySelector( 'div.overlay' ),
    closeBttn = overlay.querySelector( 'button.overlay-close' );
    transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',
        'MozTransition': 'transitionend',
        'OTransition': 'oTransitionEnd',
        'msTransition': 'MSTransitionEnd',
        'transition': 'transitionend'
    },
    transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
    support = { transitions : Modernizr.csstransitions };

function toggleOverlay() {
    if( classie.has( overlay, 'open' ) ) {
        classie.remove( overlay, 'open' );
        classie.remove( container, 'overlay-open' );
        classie.add( overlay, 'close' );
        var onEndTransitionFn = function( ev ) {
            if( support.transitions ) {
                if( ev.propertyName !== 'visibility' ) return;
                this.removeEventListener( transEndEventName, onEndTransitionFn );
            }
            classie.remove( overlay, 'close' );
        };
        if( support.transitions ) {
            overlay.addEventListener( transEndEventName, onEndTransitionFn );
        }
        else {
            onEndTransitionFn();
        }
    }
    else if( !classie.has( overlay, 'close' ) ) {
        classie.add( overlay, 'open' );
        classie.add( container, 'overlay-open' );
    }
}

triggerBttn.addEventListener( 'click', toggleOverlay );
closeBttn.addEventListener( 'click', toggleOverlay );

}) ();

Прошу прощения за мое незнание Javascript здесь.Надеюсь, что вы, ребята, можете мне помочь.

Каждая коробка с содержимым обернута в div с классом «Контейнер обработки», в каждой из которых будет кнопка с дополнительной информацией, которую я хочу использовать для наложения этого конкретного содержимого.

Возможно ли это?

Большое спасибо

Дан

...