Question

大家好，我需要一些帮助。

根据我一直关注的教程，我制作了一个应该在我的传单地图上打开的splasher。但是它只在它上面或下面打开。 splasher应该说几句话，并且可能会引人注目。一旦他们点击splasher它应该缓慢关闭，当他们点击我的html页面上的按钮2时打开它现在为我做的。 splasher不会在地图上打开。 splashe在它后面打开，因此你看不到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/leaflet@1.0.2/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/leaflet@1.0.2/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);

});

这是我的Style.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; 
}

谢天谢地，非常感谢您的帮助。

Answer 1

问题可能是版本，要在你的css

中修复这个添加z-index

#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(){

好运和好学习。

为什么Splasher不会在传单地图上打开？

1 个答案: