К странице в блоке head подключается Яндекс-карта
<!-- Карта -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&mode=debug&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
// Как только будет загружен API и готов DOM, выполняем инициализацию
ymaps.ready(initMap);
function initMap() {
// Создание экземпляра карты и его привязка к контейнеру с
// заданным id ("map")
ymaps.geocode("Россия, Калуга, улица Глаголева, 52", {results: 1}).then(function (res) {
geoObj = res.geoObjects.get(0);
var myMap = new ymaps.Map('yandexMap', {
center: geoObj.geometry.getCoordinates(),
zoom: 16
}),
geoObject1 = new ymaps.Placemark(myMap.getCenter(), {
balloonContentHeader: 'Калуга, улица Глаголева, д. 52',
},{
iconImageHref: '/img/placemark.png',
iconImageSize: [73,76],
iconImageOffset: [-45,-65]
});
myMap.controls
.add('zoomControl')
.add('typeSelector')
.add('mapTools');
myMap.geoObjects.add(geoObject1);
});
}
</script>
и на странице есть всплывающее окно, которое отображается одновременно с затемнением фона (за затемнение фона отвечает блок c id="semitransparentoverlay"
)
<div id="semitransparentoverlay"></div>
<!-- Заказать обратный звонок -->
<div id="order-callback" class="modalmsg">
</div>
CSS
#semitransparentoverlay {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
}
.modalmsg {
width: 726px;
height: auto;
padding: 55px 90px 30px 90px;
position: fixed;
background: #fff;
left: 50%;
top: 50%;
z-index: 1005;
margin-left: -363px;
display: none;
}
Скрипт
$('.contact-us-link').click (function(e) {
e.preventDefault();
e.stopPropagation();
$('#order-callback, #semitransparentoverlay').fadeIn('200');
});
$('.modalmsg .closebtn').click (function(e) {
e.preventDefault();
e.stopPropagation();
$('.modalmsg, #semitransparentoverlay').fadeOut('200');
});
В Гугл Хроме на всех страницах затемнение фона и всплывающее окно работают нормально, а на той странице, где подключена карта, всплывающее окно отображается, а блок затемнения фона отображается только если перейти в Инструмент разработчика. Создается впечатление, что дело в карте, так как если её убрать из кода страницы, то все отображается нормально. В Опере и ФФ такой баг не воспроизводится. Можно как это поправить в Хроме ?