结果固定在网页上答案

【问题标题】：Results fixed on webpage结果固定在网页上
【发布时间】：2017-11-14 02:36:05
【问题描述】：

当我尝试显示来自另一个刀片模板的内容时，它只会在网页上显示某些数据。我想要的是在这个页面里面，来自 test.blade.php 的内容和按钮，点击时会弹出一个表单（我不想要 test.blade.php 内容在里面）。但是每当我尝试这样做时，只会显示某些信息，并且当我查看页面源时，所有数据都已加载。我之前已经问过这个问题，有人告诉我这是我的 css 的错，但是当我尝试查看它时，我并没有真正看到导致这种情况发生的任何事情。有人能帮助我吗？提前致谢！

我先把截图放在这里。

这就是它的样子，它会有一个向下滚动条，下面应该有一个弹出表单的按钮。

但这就是我得到的（我已检查所有数据是否已加载）

elements.css（这是我使用的css）

#abc {
  width: 100%;
  height: 100%;
  opacity: .95;
  top: 0;
  left: 0;
  display: none;
  position: fixed;
  background-color: #313131;
  overflow: auto;
}

img#close {
  position: absolute;
  right: -14px;
  top: -14px;
  cursor: pointer;
}

div#popupContact {
  position: absolute;
  left: 50%;
  top: 17%;
  margin-left: -202px;
  font-family: 'Raleway', sans-serif;
}

form {
  max-width: 300px;
  min-width: 250px;
  padding: 10px 50px;
  border: 2px solid gray;
  border-radius: 10px;
  font-family: raleway;
  background-color: #fff;
}

p {
  margin-top: 30px;
}

h2 {
  background-color: #FEFFED;
  padding: 20px 35px;
  margin: -10px -50px;
  text-align: center;
  border-radius: 10px 10px 0 0;
}

hr {
  margin: 10px -50px;
  border: 0;
  border-top: 1px solid #ccc;
}

input[type=text] {
  width: 82%;
  padding: 10px;
  margin-top: 30px;
  border: 1px solid #ccc;
  padding-left: 40px;
  font-size: 16px;
  font-family: raleway;
}

#name {
  background-image: url(../images/name.jpg);
  background-repeat: no-repeat;
  background-position: 5px 7px;
}

#email {
  background-image: url(../images/email.png);
  background-repeat: no-repeat;
  background-position: 5px 7px;
}

textarea {
  background-image: url(../images/msg.png);
  background-repeat: no-repeat;
  background-position: 5px 7px;
  width: 82%;
  height: 95px;
  padding: 10px;
  resize: none;
  margin-top: 30px;
  border: 1px solid #ccc;
  padding-left: 40px;
  font-size: 16px;
  font-family: raleway;
  margin-bottom: 30px;
}

#submit {
  text-decoration: none;
  width: 100%;
  text-align: center;
  display: block;
  background-color: #FFBC00;
  color: #fff;
  border: 1px solid #FFCB00;
  padding: 10px 0;
  font-size: 20px;
  cursor: pointer;
  border-radius: 5px;
}

span {
  color: red;
  font-weight: 700;
}

button {
  width: 10%;
  height: 45px;
  border-radius: 3px;
  background-color: #cd853f;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  cursor: pointer;
}

evaltest.blade.php

<html>
  <head>
    <title>Popup form </title>
    <meta name="robots" content="noindex, nofollow">
    <link href="{{ asset('css/elements.css') }}" rel="stylesheet">
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-43981329-1']);
      _gaq.push(['_trackPageview']);
      (function () {
      var ga = document.createElement('script');
      ga.type = 'text/javascript';
      ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </head>
  <!-- body starts here -->
  <body id ="bdy" style="overflow:hidden;">
    <div id="abc">
      <!-- Popup div starts here -->
      <div id="popupContact">
        <!-- contact us form -->
        <form class="form-horizontal" method="post" action="{{ url('/evaltest/'.$data0->id) }}">
          {{ csrf_field() }}
          <img id ="close" src="{{ URL::to('/image') }}/3.png" onclick ="div_hide()">
          <input type="hidden" name="user_id" value="{{$data0->id}}">
          <div class="form-group">
            <label class="col-md-2"><b>Recommendation:</b></label>
            <div class="col-md-6">
              <input type="radio" id ="recommendation" name="recommendation" value="Yes"> Yes<br>
              <input type="radio" id ="recommendation" name="recommendation" value="No"> No<br>
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-6-offset-2">
              <input id= "submit" type="submit" href="javascript: check_empty()" class="btn btn-primary" value="Save">
            </div>
          </div>
        </form>
      </div>
      <!-- Popup Div Ends Here -->
      // @include('test')
      //it will show all data if I were to put here but I don't want to put it together with the popup form
    </div>
    <!-- Display Popup Button -->
    //this will show a few info but no button       
    @include('test')
    <h1>Click Button to Evaluate</h1>
    <button id="popup" onclick="div_show()">Popup</button>
    <script src="{{ asset('/js/my_js.js') }}"></script>
    //this will show even lesser info but button is shown
    //@include('test')
  </body>
</html>

test.blade.php（里面有更多信息，但我只是举一些作为我如何获取信息的示例）

<div class="container">
  @foreach ($data as $object)
    <b>Name: </b>{{ $object->Name }}<br><br>
    <b>Alias: </b>{{ $object->Alias }}<br><br>
    <b>Email: </b>{{$object->Email}}<br><br>
  @endforeach
</div>

我尝试删除 css 中的一些内容，但没有任何反应，我什至尝试使用 position: fixed 删除那些内容，还添加了 .container，但它仍然不起作用。

myjs.js

// function to display popup
function div_show() {
  document.getElementById('abc').style.display = "block";
}

// function to hide popup
function div_hide(){
  document.getElementById('abc').style.display = "none";
}

【问题讨论】：

能把div_show()JS函数的代码贴出来吗？
@johnEllmore 在里面添加了 JS
很遗憾，不清楚您要的是什么。你能解释一下这个应用程序的用途吗？也许列出显示错误的过程步骤？很难从你这里得到什么来推断。
我正在尝试创建一个页面，其中将显示所有带有 evaltest.blade.php 按钮的 test.blade.php。所以我决定在 evaltest.blade.php 中将它们组合在一起，但由于某种原因，它只显示了一些 test.blade.php 的信息，如我的屏幕截图所示，它应该显示的还不止这些。我还检查了数据是否已经加载，所以应该没有任何理由丢失它
所以原因应该是css（正如另一个问题中有人提到的那样）或者我组合/使用test.blade.php的方式

标签： php css laravel

【解决方案1】：

我已经弄清楚如何显示我的数据是我必须删除 style="overflow:hidden;" 部分才能正常工作

【讨论】：