Question

当我尝试显示其他刀片模板中的内容时，它只会在网页上显示某些数据。我想要的是在这个页面内，来自 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";
}

Answer 1

我已经弄明白了如何显示我的数据是我必须删除style="overflow:hidden;"部分以便它可以正常工作

结果已在网页

1 个答案: