错误：自动覆盖加载（引导程序）（laravel 5.2）

Posted 2023-02-22

【中文标题】错误：自动覆盖加载（引导程序）（laravel 5.2）

【英文标题】：Bug : Overlay loading automatically (bootstrap) (laravel 5.2)

【发布时间】：2017-02-02 22:42:35

【问题描述】：

我在 laravel 5.2 中使用 chart.js。当我转到我的页面时，所有图表都会自动加载（但这不应该发生）。另外，我没有使用 window.load 或 window.onload 函数。

它应该只在点击时打开（这里，点击图片）

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"   >
                        
                

                    </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"   >
                        
                

                    </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"   >
                        
                

                    </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"   >
                        
                

                    </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"   class="img-circle img-responsive" /> </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"   class="img-circle img-responsive" /> </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"   class="img-circle img-responsive" /> </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"   class="img-circle img-responsive" /> </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" ></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>

编辑：

我认为覆盖是自动加载的。

【参考方案1】：

当浏览器遇到<script> 块时，它会运行<script> 标签内的内容，即使没有window.load 函数。

您的浏览器正在执行这一行：

setTimeout(chart1, 30)

一旦超时时间到期，它就会运行您的chart1 并构建图表。

删除该行，如果没有用户交互，这将不再发生。

【讨论】：

究竟是什么不起作用？请提供您的代码的工作更新版本（工作 jsfiddle/sn-p - 不是一些没有 html 的 javascript）

@YaShChaudhary，我在该链接中没有看到任何图表。

@Dekel Top 10 标题面板是带有十字符号的图表（用于关闭）......它们是预加载的（这就是问题）。

@Dekel 我已经让它们在叠加层中打开

在您提供的 jsfiddle 中没有图表。它们都未加载（在您的问题中，您说它们已加载，即使您不希望它们加载）。

【参考方案2】：

除了Beetlejuice being correct about timeouts loading the charts，您似乎还在关注fullscreen overlay tutorial on w3schools，但只是部分原因：您的示例代码（和您的JSFiddle）中缺少教程中的覆盖样式。

“添加 CSS”部分和“添加 JavaScript”部分实际上隐藏了叠加层并使其工作。如果您想隐藏叠加层，我建议您遵循完整的教程，而不仅仅是顶部的小 HTML sn-p。

这与 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;
    

【讨论】：

是的，实际上我从错误的路径链接了 css 文件。

【参考方案3】：

你可以把你写的所有代码直接放到你的<script>标签中，放到一个函数中，比如show_charts()，如下所示：

function show_charts()

  //All your code over here

然后您可以将其与 onclick 函数关联到您希望被单击以加载图表的任何元素，如下所示：

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

您只需将onclick="show_charts()" 添加到您的元素标签即可将其与任何元素相关联。希望这会有所帮助

【讨论】：

你能提供jsfiddle链接吗？

另外，如果你使用 laravel，如果你使用刀片模板引擎，你可以将 php 代码更改为如下所示

var data_viewer = $viewer; ; var data_viewer1 = $viewer1; ;

什么没用？带有 onclick 或刀片变量 laravel 部分的功能？

实际上..两者都已经在工作（如问题所示）......但在窗口加载时也会加载叠加层。