Доброй ночи, дорогие про. За окном темно, а я продолжаю по чуть-чуть изучать javascript.
Столкнулся тут в одном шаблоне с такой штукой:
<div class="container overlay overlay-slidedown">
<div class="row">
1* <a class="overlay-close"><br><img class="img-responsive center-block" src="img/xsep.png" alt="close image" title="Закрыть"></a>
<div class="overlay-section"></div>
<div class="col-md-12 ">
2* <a class="overlay-close"><br><br><img class="img-responsive center-block" src="img/xsep.png" alt="close image" data-toggle="tooltip" title="Закрыть"></a>
</div>
</div>
</div>
1* и 2* помечены кнопки для закрытия модального окна.
Кнопка 2* работает, кнопка 1* нет. Понять почему не могу.
Подозреваю, что это связано как-то с позицией относительно
<div class="overlay-section"></div>
Сам javascript, который все это обслуживает выглядит так:
(function() {
var triggerBttn1 = document.getElementById( 'trigger-overlay-1' )
overlay = document.querySelector( 'div.overlay' ),
closeBttn = overlay.querySelector( 'a.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.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();
}
$( "body" ).removeClass( "noscroll" );
}
else if( !classie.has( overlay, 'close' ) ) {
classie.add( overlay, 'open' );
$( "body" ).addClass( "noscroll" );
}
$("div.overlay").animate({ scrollTop: 0 }, "slow");
}
$(document).bind('keydown',function(e){
if ( e.which == 27 ) {
toggleOverlay();
};
});
closeBttn.addEventListener( 'click', toggleOverlay );
triggerBttn1.addEventListener( 'click', toggleOverlay );
return false;
})();
А теперь, внимание, вопрос, который не дает мне лечь спать в 2 ночи!
Как закрыть модальное окно ссылкой, которая помечена как 1*??? =)) Знаю, что ответ будет прост, но я чет пока не понял как это сделать.
