錯誤：自動覆蓋加載（引導）（laravel 5.2）

我正在使用chart.js laravel 5.2。當我進入我的頁面時，所有圖表都自動加載（但這不應該發生）。此外，我不使用window.load或window.onload函數。錯誤：自動覆蓋加載（引導）（laravel 5.2）

它應該只在點擊打開（在這裏，點擊上圖）

的jsfiddle鏈接：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>

編輯： 我想覆蓋被自動加載。

來源

2016-09-25 YaSh Chaudhary

除了Beetlejuice being correct about timeouts loading the charts之外，它看起來像是在遵循fullscreen overlay tutorial on w3schools，但部分原因是：示例代碼（和JSFiddle）中缺少教程的疊加樣式。

大'添加CSS'部分和'添加JavaScript'部分是實際隱藏覆蓋並使其工作。如果您希望疊加層隱藏，我建議您按照完整的教程而不是頂部的小HTML代碼片段。

這與Bootstrap或Laravel無關。？

Edited JSFiddle with the tutorial CSS copy-pasted in：

/* 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; 
 
    } 
 
}

來源

2016-10-04 07:20:00 Leith

是的，其實我鏈接錯誤的路徑的CSS文件。 –

當瀏覽器遇到<script>塊時，即使沒有window.load函數，它也會運行<script>標記中的內容。

您的瀏覽器正在執行這一行：

setTimeout(chart1, 30)

一旦超時，它運行在您的chart1並建立圖表。

刪除該行，這將不再發生沒有用戶交互。

來源

2016-09-25 15:56:43 BeetleJuice

嗯..沒有工作:( –

究竟不起作用怎麼辦，請您提供您的代碼的工作更新版本（工作的jsfiddle /片段 - 不是一些沒有html的javascript） – Dekel

@Dekel wotking jsfiddlr：https：// jsfiddle。net/Lxdhhj7j/ –

你可以把所有你直接寫入到您的<script>標記成一個函數的代碼，說show_charts（）這樣的：

function show_charts() 
{ 
    //All your code over here 
}

，然後你可以用一個onclick功能的任何元素相關聯你想被點擊加載圖表，就像這樣：

<img onclick="show_charts()" src="..." />

您只需通過添加onclick="show_charts()"你的元素標籤此相關聯的任何元素。希望這會有所幫助

來源

2016-10-01 15:43:23

你能提供jsfiddle鏈接嗎？ –

https://jsfiddle.net/twj8xc6e/ –

另外，如果您使用的是laravel，則可以將php代碼更改爲如果使用刀片模板引擎 –

錯誤：自動覆蓋加載（引導）（laravel 5.2）

回答

相關問題