Bug:自动加载叠加(bootstrap) (laravel 5.2)
Bug : Overlay loading automatically (bootstrap) (laravel 5.2)
我在laravel 5.2中使用chart.js。当我转到我的页面时，所有的图表都自动加载(但是这不应该发生)。此外，我是不使用窗口。加载或窗口。onload函数。
它应该只在点击(这里，点击pic)时打开
jsfiddle link: https://jsfiddle.net/Lxdhhj7j/
<div class="container-fluid">
<div id="myNav1" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav1()">×</a>
<div class="overlay-content">
<script>
var year1 = ['FIRST','SECOND','THIRD', 'FOURTH' , 'FIFTH'];
var data_viewer = <?php echo $viewer; ?>;
var data_viewer1 = <?php echo $viewer1; ?>;
var data_viewer2 = <?php echo $viewer2; ?>;
var data_viewer3 = <?php echo $viewer3; ?>;
var data_viewer4 = <?php echo $viewer4; ?>;
var data_viewer5 = <?php echo $viewer5; ?>;
var data_click = <?php echo $click; ?>;
var data_click1 = <?php echo $click1; ?>;
var data_click2 = <?php echo $click2; ?>;
var data_click3 = <?php echo $click3; ?>;
var data_click4 = <?php echo $click4; ?>;
var data_click5 = <?php echo $click5; ?>;
var barChartData1 = {
labels: year1,
datasets: [{
label: 'STUDS',
backgroundColor: "rgba(65,105,225,0.5)",
data: data_click
}, {
label: 'ANGELS',
backgroundColor: "rgba(255,105,180,0.5)",
data: data_viewer
}],
};
function chart1(){
var ctx1 = document.getElementById("canvas1").getContext("2d");
var myBar1 = new Chart(ctx1, {
type: 'horizontalBar',
data: barChartData1,
options: {
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(169, 169, 169)',
borderSkipped: 'bottom'
}
},
scales: {
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
}
}]
},
responsive: true,
title: {
display: true,
text: 'RATING CHART'
}
}
});
};
</script>
<br>
<form action="done" method="get" accept-charset="utf-8">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-heading">TOP 10</div>
<div class="panel-body">
<div class="row">
<section class="col-md-12">
<canvas id="canvas1" height="700" width="950" >
</canvas>
</section>
<section class="col-md-2">
</section>
</div>
</div>
</div>
</div>
<section class="col-md-offset-1 col-md-4">
<div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<section style="" class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE STUDS</h4>
</section>
<section class="col-md-offset-1">
<ul style="padding:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(data_click1) </script></li>
<li>Rank 2 : <script> document.writeln(data_click2) </script></li>
<li>Rank 3 : <script> document.writeln(data_click3) </script></li>
<li>Rank 4 : <script> document.writeln(data_click4) </script></li>
<li>Rank 5 : <script> document.writeln(data_click5) </script></li>
</ul>
</section>
</div>
</div>
<div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<div class="row">
<section class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE ANGELS</h4>
</section>
<section class="col-md-offset-1">
<ul style="padding-left:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(data_viewer1) </script></li>
<li>Rank 2 : <script> document.writeln(data_viewer2) </script></li>
<li>Rank 3 : <script> document.writeln(data_viewer3) </script></li>
<li>Rank 4 : <script> document.writeln(data_viewer4) </script></li>
<li>Rank 5 : <script> document.writeln(data_viewer5) </script></li>
</ul>
</section>
</div>
</div>
</div>
</section>
</div>
</div>
</form>
<!--graph goes here !--></div>
</div>
<div id="myNav2" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav2()">×</a>
<div class="overlay-content">
<script>
var year2 = ['FIRST','SECOND','THIRD', 'FOURTH' , 'FIFTH'];
var secondfemale = <?php echo $secondfemale; ?>;
var secondfemale1 = <?php echo $secondfemale1; ?>;
var secondfemale2 = <?php echo $secondfemale2; ?>;
var secondfemale3= <?php echo $secondfemale3; ?>;
var secondfemale4 = <?php echo $secondfemale4; ?>;
var secondfemale5 = <?php echo $secondfemale5; ?>;
var secondmale = <?php echo $secondmale; ?>;
var secondmale1 = <?php echo $secondmale1; ?>;
var secondmale2 = <?php echo $secondmale2; ?>;
var secondmale3 = <?php echo $secondmale3; ?>;
var secondmale4 = <?php echo $secondmale4; ?>;
var secondmale5 = <?php echo $secondmale5; ?>;
var barChartData2 = {
labels: year2,
datasets: [{
label: 'STUDS',
backgroundColor: "rgba(65,105,225,0.5)",
data: secondmale
}, {
label: 'ANGELS',
backgroundColor: "rgba(255,105,180,0.5)",
data: secondfemale
}],
};
function chart2(){
var ctx2 = document.getElementById("canvas2").getContext("2d");
var myBar2 = new Chart(ctx2, {
type: 'horizontalBar',
data: barChartData2,
options: {
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(169, 169, 169)',
borderSkipped: 'bottom'
}
},
scales: {
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
}
}]
},
responsive: true,
title: {
display: true,
text: 'RATING CHART'
}
}
});
};
setTimeout(chart2, 30)
</script>
<br>
<form action="done" method="get" accept-charset="utf-8">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-heading">TOP 10</div>
<div class="panel-body">
<div class="row">
<section class="col-md-12">
<canvas id="canvas2" height="700" width="950" >
</canvas>
</section>
<section class="col-md-2">
</section>
</div>
</div>
</div>
</div>
<section class="col-md-offset-1 col-md-4">
<div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<section style="" class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE STUDS</h4>
</section>
<section class="col-md-offset-1">
<ul style="padding:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(secondmale1) </script></li>
<li>Rank 2 : <script> document.writeln(secondmale2) </script></li>
<li>Rank 3 : <script> document.writeln(secondmale3) </script></li>
<li>Rank 4 : <script> document.writeln(secondmale4) </script></li>
<li>Rank 5 : <script> document.writeln(secondmale5) </script></li>
</ul>
</section>
</div>
</div>
<div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<div class="row">
<section class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE ANGELS</h4>
</section>
<section class="col-md-offset-1">
<ul style="padding-left:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(secondfemale1) </script></li>
<li>Rank 2 : <script> document.writeln(secondfemale2) </script></li>
<li>Rank 3 : <script> document.writeln(secondfemale3) </script></li>
<li>Rank 4 : <script> document.writeln(secondfemale4) </script></li>
<li>Rank 5 : <script> document.writeln(secondfemale5) </script></li>
</ul>
</section>
</div>
</div>
</div>
</section>
</div>
</div>
</form>
<!--graph goes here !--></div>
</div>
<div id="myNav3" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav3()">×</a>
<div class="overlay-content">
<script>
var year3 = ['FIRST','SECOND','THIRD', 'FOURTH' , 'FIFTH'];
var thirdfemale = <?php echo $thirdfemale; ?>;
var thirdfemale1 = <?php echo $thirdfemale1; ?>;
var thirdfemale2 = <?php echo $thirdfemale2; ?>;
var thirdfemale3 = <?php echo $thirdfemale3; ?>;
var thirdfemale4 = <?php echo $thirdfemale4; ?>;
var thirdfemale5 = <?php echo $thirdfemale5; ?>;
var thirdmale = <?php echo $thirdmale; ?>;
var thirdmale1 = <?php echo $thirdmale1; ?>;
var thirdmale2 = <?php echo $thirdmale2; ?>;
var thirdmale3 = <?php echo $thirdmale3; ?>;
var thirdmale4 = <?php echo $thirdmale4; ?>;
var thirdmale5 = <?php echo $thirdmale5; ?>;
var barChartData3 = {
labels: year3,
datasets: [{
label: 'STUDS',
backgroundColor: "rgba(65,105,225,0.5)",
data: thirdmale
}, {
label: 'ANGELS',
backgroundColor: "rgba(255,105,180,0.5)",
data: thirdfemale
}],
};
function chart3() {
var ctx3 = document.getElementById("canvas3").getContext("2d");
var myBar3 = new Chart(ctx3, {
type: 'horizontalBar',
data: barChartData3,
options: {
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(169, 169, 169)',
borderSkipped: 'bottom'
}
},
scales: {
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
}
}]
},
responsive: true,
title: {
display: true,
text: 'RATING CHART'
}
}
});
};
setTimeout(chart3, 30);
</script>
<br>
<form action="done" method="get" accept-charset="utf-8">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-heading">TOP 10</div>
<div class="panel-body">
<div class="row">
<section class="col-md-12">
<canvas id="canvas3" height="700" width="950" >
</canvas>
</section>
<section class="col-md-2">
</section>
</div>
</div>
</div>
</div>
<section class="col-md-offset-1 col-md-4">
<div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<section style="" class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE STUDS</h4>
</section>
<section class="col-md-offset-1">
<ul style="padding:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(thirdmale1) </script></li>
<li>Rank 2 : <script> document.writeln(thirdmale2) </script></li>
<li>Rank 3 : <script> document.writeln(thirdmale3) </script></li>
<li>Rank 4 : <script> document.writeln(thirdmale4) </script></li>
<li>Rank 5 : <script> document.writeln(thirdmale5) </script></li>
</ul>
</section>
</div>
</div>
<div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<div class="row">
<section class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE ANGELS</h4>
</section>
<section class="col-md-offset-1">
<ul style="padding-left:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(thirdfemale1) </script></li>
<li>Rank 2 : <script> document.writeln(thirdfemale2) </script></li>
<li>Rank 3 : <script> document.writeln(thirdfemale3) </script></li>
<li>Rank 4 : <script> document.writeln(thirdfemale4) </script></li>
<li>Rank 5 : <script> document.writeln(thirdfemale5) </script></li>
</ul>
</section>
</div>
</div>
</div>
</section>
</div>
</div>
</form>
<!--graph goes here !--></div>
</div>
<div id="myNav4" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav4()">×</a>
<div class="overlay-content">
<script>
var year4 = ['FIRST','SECOND','THIRD', 'FOURTH' , 'FIFTH'];
var fourthfemale = <?php echo $fourthfemale; ?>;
var fourthfemale1 = <?php echo $fourthfemale1; ?>;
var fourthfemale2 = <?php echo $fourthfemale2; ?>;
var fourthfemale3 = <?php echo $fourthfemale3; ?>;
var fourthfemale4 = <?php echo $fourthfemale4; ?>;
var fourthfemale5 = <?php echo $fourthfemale5; ?>;
var fourthmale = <?php echo $fourthmale; ?>;
var fourthmale1 = <?php echo $fourthmale1; ?>;
var fourthmale2 = <?php echo $fourthmale2; ?>;
var fourthmale3 = <?php echo $fourthmale3; ?>;
var fourthmale4 = <?php echo $fourthmale4; ?>;
var fourthmale5 = <?php echo $fourthmale5; ?>;
var barChartData4 = {
labels: year4,
datasets: [{
label: 'STUDS',
backgroundColor: "rgba(65,105,225,0.5)",
data: fourthmale
}, {
label: 'ANGELS',
backgroundColor: "rgba(255,105,180,0.5)",
data: fourthfemale
}],
};
function chart4() {
var ctx4 = document.getElementById("canvas4").getContext("2d");
window.myBar4 = new Chart(ctx4, {
type: 'horizontalBar',
data: barChartData4,
options: {
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(169, 169, 169)',
borderSkipped: 'bottom'
}
},
scales: {
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
}
}]
},
responsive: true,
title: {
display: true,
text: 'RATING CHART'
}
}
});
};
// var nav4=document.getElementById("myNav4")
// nav4.onclick = function(){
setTimeout(chart4, 30)
//}
</script>
<br>
<form action="done" method="get" accept-charset="utf-8">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-heading">TOP 10</div>
<div class="panel-body">
<div class="row">
<section class="col-md-12">
<canvas id="canvas4" height="700" width="950" >
</canvas>
</section>
<section class="col-md-2">
</section>
</div>
</div>
</div>
</div>
<section class="col-md-offset-1 col-md-4">
<div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<section style="" class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE STUDS</h4>
</section>
<section class="col-md-offset-1">
<ul style="padding:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(fourthmale1) </script></li>
<li>Rank 2 : <script> document.writeln(fourthmale2) </script></li>
<li>Rank 3 : <script> document.writeln(fourthmale3) </script></li>
<li>Rank 4 : <script> document.writeln(fourthmale4) </script></li>
<li>Rank 5 : <script> document.writeln(fourthmale5) </script></li>
</ul>
</section>
</div>
</div>
<div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<div class="row">
<section class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE ANGELS</h4>
</section>
<section class="col-md-offset-1">
<ul style="padding-left:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(fourthfemale1) </script></li>
<li>Rank 2 : <script> document.writeln(fourthfemale2) </script></li>
<li>Rank 3 : <script> document.writeln(fourthfemale3) </script></li>
<li>Rank 4 : <script> document.writeln(fourthfemale4) </script></li>
<li>Rank 5 : <script> document.writeln(fourthfemale5) </script></li>
</ul>
</section>
</div>
</div>
</div>
</section>
</div>
</div>
</form>
<!--graph goes here !--></div>
</div>
<!-- Brand and toggle get grouped for better mobile display -->
<nav id="in" class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- /.navbar-collapse -->
<div class="row">
<section id="aks" class="col-md-1">
AksOut~
</section>
<section class="col-lg-6 col-sm-12 col-xs-12 col-md-6 col-lg-offset-1 col-md-offset-3"><span id="know"><u>Know your collegemates better...</u></span></section>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span>Menu<span class="glphicon glyphicon-chevron down"></span></button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li id="menu"><a href="crush.html">MyPlace</a></li>
<li id="menu"><a href="#">Interact</a></li>
<li id="menu"><a href="#">Happenings</a></li>
<li id="menu"><a href="#">News</a></li>
<li id="menu"><a href="#">reports</a></li>
<li id="menu"><a href="#">ThinkTank</a></li>
<li id="menu"><a href="#">TalentPool</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<!--search bar-->
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<br><div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-1"></div>
<div class="col-lg-3"></div>
<div class="col-lg-3"></div>
<section class="col-lg-1" id="svg"></section>
<section class="col-lg-3"><label id="label1">score</label></section>
<section class="col-lg-2"><input type="text"></section>
</div></br>
</div>
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-1 col-lg-offset-5">
<button type="button" class="btn btn-sm btn-default" id="messages" >Friends</button>
</div>
<div class="col-lg-1">
<div class="btn-group">
<button type="button" id="messages" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Chat<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="dropdown-header">Dropdown header 1</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">First Link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled Link</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated Link</a></li>
</ul>
</div>
</div>
<div class="col-lg-1">
<div class="btn-group">
<button id="messages" type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Messages<span class="caret" ></span></button>
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="dropdown-header">Dropdown header 1</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">First Link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled Link</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated Link</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-md-3 col-lg-3"> <span id="span1" style="font-size:30px;cursor:pointer;" onclick="openNav1()">
<br><div><img id="img1" src="pic/1 (1).jpg" width="250" height="250" class="img-circle img-responsive" alt=""/> </div></br>
</span> </div>
<div class="col-md-3 col-lg-offset-2"> <span id="span2" style="font-size:30px;cursor:pointer;" onclick="openNav2()">
<br><div><img id="img2" src="pic/1 (44).jpg" width="250" height="250" class="img-circle img-responsive" alt=""/> </div></br>
</span> </div>
</div>
<div class="row">
<div class="col-md-3 col-lg-offset-1"> <span id="span3" style="font-size:30px;cursor:pointer;" onclick="openNav3()">
<br><div><img id="img3" src="pic/1 (45).jpg" width="250" height="250" class="img-circle img-responsive" alt=""/> </div></br>
</span> </div>
<div class="col-md-3 col-lg-offset-2"> <span id="span4" style="font-size:30px;cursor:pointer;" onclick="openNav4()">
<br><div><img id="img4" src="pic/1 (46).jpg" width="250" height="250" class="img-circle img-responsive" alt=""/> </div></br>
</span> </div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading" id="panel">
<h3 class="panel-title" id="have" >Groups</h3>
</div>
<div class="panel-body" id="grpfoot">
<div class="col-md-4"><img src="images/ImgResponsive_Placeholder.png" class="img-circle img-responsive" alt="Placeholder image"></div>
<div class="col-md-4 col-lg-8">
<input type="text" name="textfield" id="textfield">
</div>
<div></div>
</div>
<div id="see" class="panel-footer">
<button type="button" class="btn btn-sm btn-default">SeeMore>></button>
<div class="pull-right">
<button type="button" class="btn btn-sm btn-default">Create </button>
</div>
</div>
</div>
</div>
<div class="col-lg-6"></div>
</div>
<script>
function openNav1() {
document.getElementById("myNav1").style.width = "100%";
chart1();
}
function closeNav1() {
document.getElementById("myNav1").style.width = "0%";
}
</script>
<script>
function openNav2() {
document.getElementById("myNav2").style.width = "100%";
chart2();
}
function closeNav2() {
document.getElementById("myNav2").style.width = "0%";
}
</script>
<script>
function openNav3() {
document.getElementById("myNav3").style.width = "100%";
chart3();
}
function closeNav3() {
document.getElementById("myNav3").style.width = "0%";
}
</script>
<script>
function openNav4() {
document.getElementById("myNav4").style.width = "100%";
chart4();
}
function closeNav4() {
document.getElementById("myNav4").style.width = "0%";
}
</script>当浏览器遇到<script>块时，它将运行<script>标签内的内容，即使没有window.load功能。
你的浏览器正在执行这一行:
setTimeout(chart1, 30)
一旦超时过期，它运行您的chart1并构建图表。
除了Beetlejuice关于加载图表超时的正确之外，看起来您正在遵循w3schools上的全屏覆盖教程，但只是部分:教程中的覆盖样式在您的示例代码(和您的JSFiddle)中丢失。
大的"添加CSS"部分和"添加JavaScript"部分实际上隐藏了覆盖并使其工作。如果你想隐藏覆盖，我建议遵循完整的教程，而不仅仅是顶部的小HTML片段。
这与Bootstrap或Laravel无关。
编辑JSFiddle与教程CSS复制粘贴在:
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 0;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
/* The navigation links inside the overlay */
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}您可以将直接写入<script>标记的所有代码放入函数中，如show_charts():
function show_charts()
{
//All your code over here
}
，然后你可以将它与一个onclick函数关联到任何你想要点击来加载图表的元素，像这样:
<img onclick="show_charts()" src="..." />
您可以通过在元素标签中添加onclick="show_charts()"将其与任何元素关联。希望对大家有所帮助
相关文章：
- 如何在Bootstrap Modal中为动态点击生成的变量设置jade属性
- Ajax Live搜索发布到Laravel视图
- 浮动页脚栏-使用Bootstrap隐藏
- Twitter Bootstrap typeahead:使用“this”获取上下文/调用元素
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- AngularJS/HTML/Bootstrap元素用于动态搜索结果
- Javascript+Bootstrap图像库未加载
- Bootstrap Dropdown selection是在*all*下拉菜单上设置选择
- Bootstrap 3 Datepicker v4:dp.show和dp.change事件在Datepicker内联时不
- 如何使用input-tage上传图片并查看在laravel中上传的文件预览
- Bootstrap-三列相等;t更改'a'要素
- 我应该先学习Angularjs还是Laravel
- 在bootstrap中显示隐藏特定的li
- 使用Bootstrap Datepicker，Javascript和Laravel查询转到给定的链接
- Laravel Route to delete with Javascript/Bootstrap Checkbox
- bootstrap模式下的Laravel 4验证
- Bug:自动加载叠加(bootstrap) (laravel 5.2)
- Laravel Elixir and Bootstrap's JS
- laravel中的bootstrap文件夹是用来做什么的
- 如何在Laravel上提交表单后关闭Bootstrap Modal
