Почему Splasher не откроется на карте лифтов?

Привет всем Мне нужна помощь, пожалуйста.Почему Splasher не откроется на карте лифтов?

Я сделал брызговик, который, как предполагается, откроется на моей карте листовки в соответствии с учебным пособием, которым я занимаюсь. Однако он открывается только выше или ниже. Брызговик должен просто сказать несколько слов и потенциально может сделать убедительный момент. Как только они нажимают на splasher, он должен медленно закрываться и открываться, когда они нажимают кнопку 2 на моей странице html, которую он делает для меня сейчас. Плеватель просто не откроется на карте. После этого открывается зазор, поэтому вы не можете видеть splasher или текст.

Вот учебник я на YouTube:

https://www.youtube.com/watch?v=YRir-Hq4x4c

Вот мой код, это мой index.html

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <title> Map Elements Design jQuery</title> 
    <link type="text/css" rel="stylesheet" href="css/style.css" > 
    <link rel="stylesheet"  href="https://unpkg.com/[email protected]/dist/leaflet.css" > 
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet"> 

</head> 

<body> 
<div id="header"> 
<h1 id="designTime">Design Time</h1> 
<button id="button1" class="buttons">Button 1</button> 
<button id="button2" class="buttons">Button 2</button> 
</div> 
<div id="wrapper"> 
<div id="map"></div> 
<div id="splasher"><h1>Is Eric Really Excelling?</h1><p1>Yes, he really is</p1></div> 
</div> 



<script src="js/jquery.js"></script> 
<script src="js/jqueryui.js"></script> 
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
<script src="js/ttc.js"></script> 
<script src="js/script.js"></script> 


</body> 


</html>

Вот мой script.js:

$(document).ready(function(){ 
    $("#splasher").click(function(){ 
     $("#splasher").fadeOut('slow'); 
    }); 
    $("#button2").click(function(){ 
     $("#splasher").fadeIn('slow'); 
    }); 

    var map = L.map('map',{ 
     center: [43.6577, -79.3788], 
     zoom: 11, 
     minzoom: 4, 
     maxzoom: 14, 
     attributionControl: false 
    }); 

    var firstLayer = 
L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg', { 
attribution: 'Acetate tileset from GeoIQ' 
}) 
    .addTo(map); 

function attach (feature,layer) { 
    layer.bindPopup("<h1 class='infoHeader'> Toronto TTC Subway Name</h1><p class='infoHeader'>" + feature.properties.SBWAY_NAME +"</p>"); 
}; 

    L.geoJSON(ttc,{ 

     onEachFeature: attach 

}).addTo(map); 

});

Это мой стиль.css

html { 
    background-color:gray; 
} 

body { 
    width: 960px; 
    padding: 5px; 
    padding:5 px; 
    font-family: "Indie Flower", "Fjalla One", Helvetica, Corbel; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: black; 

} 


#designTime { 
    color: white; 
    font-size: 60px; 
    width: 100%; 
    position: center; 

} 

#wrapper { 
    margin-right: auto; 
    margin-left: auto; 
    width: 100%; 

} 

#splasher { 
    background-color: white; 
    padding: 16px; 
    padding-top: 0px; 
    width: 500px; 
    margin-left: auto; 
    margin-right: auto; 
    opacity: .8; 
    position: absolute; 
    top: 250px; 

} 

#map { 
    height: 580px; 
    background-color:blue; 
}

Благодарим вас, ваша помощь с благодарностью.

источник

2017-01-24 E-LoGreen

Проблема может быть версии, чтобы исправить это добавить Z-индекс в вашем CSS

#splasher { 
background-color: white; 
padding: 16px; 
padding-top: 0px; 
width: 500px; 
margin-left: auto; 
margin-right: auto; 
opacity: .8; 
position: absolute; 
top: 250px; 
z-index:2000 
}

Вы можете проверить ваш проект работает здесь: https://jsfiddle.net/cyjmv2rz/

и вторая проблема является $("#splasher").click(function(){ изменение $("#button1").click(function(){

Удачи и хороших исследований.

источник

2017-01-25 06:33:39 HudsonPH

Спасибо за ваше время. работал как шарм, чтобы исчезнуть и снова появился брызговик, используя только кнопки. Тем не менее, я стремился сделать splasher disapear, когда я нажимаю на него, и снова появляться, когда я нажимаю одну из двух кнопок. У тебя есть решение? –

Я написал решение для этого тоже нет? вам просто нужно изменить кусок кода js ... – HudsonPH

Почему Splasher не откроется на карте лифтов?

ответ

Смежные вопросы