使用onclick HTML的灰色背景

时间:2018-11-16 20:42:20

标签: javascript html css

我想知道按钮标签内是否可以有两个onclick参数,例如:

<!-- MAP - https://leafletjs.com/examples/geojson/ -->


            <div id="mapid" style="width: 100%; height: 500px; border: dotted;">
                <script>

                    var mymap = L.map('mapid').setView([61.168, -149.8813], 10);
                    var q = [{"type":"MultiPolygon","coordinates":[[[[-149.72338652766,61.1241310732884],[-149.723306492926,61.1241347033877],[-149.723286765036,61.1241509286142],[-149.723242555995,61.1241529338634],[-149.723213286266,61.1241382068663],[-149.722979311586,61.1241488175764],[-149.72296258821,61.1240628206917],[-149.723128666374,61.1240552877427],[-149.723130999702,61.1240672832556],[-149.723194724409,61.1240643935417],[-149.72322540512,61.124047627999],[-149.72326448864,61.1240458554958],[-149.723294540424,61.124060479073],[-149.723372113455,61.1240569606234],[-149.72338652766,61.1241310732884]]]]},{"type":"MultiPolygon","coordinates":[[[[-149.89717999948,61.1513470000162],[-149.89693000048,61.1513489997907],[-149.89692799917,61.1512769997723],[-149.897177999458,61.1512750000028],[-149.89717999948,61.1513470000162]]]]}]
                    var n = {{ qrjs|safe }}
                    console.log(n);
                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                        maxZoom: 18,
                        id: 'mapbox.streets',
                    }).addTo(mymap);
                    L.geoJSON(q).addTo(mymap);
                    L.geoJSON(n).addTo(mymap);




                </script>
            </div>

我的CSS是onclick参数的

    <div id="Spacer" align="center">
      <button id="button" onclick="document.getElementById('pop').style.display='block'; " onclick="$('#grayout').toggle(900); return false;">
        <a id="Text">Click to go to Google</a>
      </button>
    </div>

但这不起作用。有什么方法可以打开名为“ pop”的弹出框并使背景变灰?如果不能没有任何外部Java,那也将是一个好处。

2 个答案:

答案 0 :(得分:1)

只需使用:

    $('#button').on('click', function() {
        document.getElementById('pop').style.display='block';
        $('#grayout').toggle(900);
    });

在脚本或-tag

说明: 在这里发生的是,您为带有id为button的元素上的click事件添加了一个事件侦听器。因此,当您单击#button时,javascript将使用花括号将代码执行。

答案 1 :(得分:0)

我会这样说:

<button id="button" onclick="document.getElementById('pop').style.display='block';$('#grayout').toggle(900); return false; " >

有可能在一个事件中包含多个javascript行。也就是说,您最好编写一个方法并将这些语句包含在其中。 为了使用$语法,您将需要jquery。像这样将其包含在您的head标签中:

 < head >
< script src="jquery-3.3.1.min.js" >< /script>
< /head>