<html 1>
轉發按鈕所在： href 使用 javascript 監聽， 通過 onclick 事件 reposted 到達 <script> </script> ，后續事件由 js 進行處理（在使用 onclick 方法時，順便通過 ：方法名('{{ 待傳值}}' , '{{ }}')）將值傳遞給js ，以便后續賦值運算。
class =" newbody" 是為了 當js監聽打開窗口時，隱藏頁面按鈕，防止彈出框彈出時還可以通過頁面按鈕改變彈出框內容。
<div class="content newbody">
{{--轉發功能所在--}}
<span ><a href="javascript:void(0);" onclick="reposted(' {{$status->id }} ', ' {{$status->content }} ',
'{{ $status->repost_count }}')">轉發 ({{ $status->repost_count}})</a></span>
</div>
< js>
通過引用 .css 完成窗口彈出操作，設置彈出框的一些屬性；
$().fadeIn() 慢進；$().slideDown() 通過使用滑動效果，顯示隱藏的被選元素; $().hide() 隱藏選中的元素；
$().fadeOut() 滿出； $().slideUp() 通過使用滑動效果，隱藏顯示的被選元素; $().show()顯示選中的元素；
新增加一個ajax方法，使用另外一種方法到達控制器，不是form表單提交的方式了。（此處使用ajax是功能需要，頁面已經是彈出框監聽了form頁面提交了，不可以同時出現兩個表單提交方法，但是數據還是必須要獲取的，所以采用ajax方法）
<link rel="stylesheet" type="text/css" href="/css/app.css"<script function reposted(id, content, repost_count) {//$.ajax({
//通過ajax到達控制器，然后返回值（此處作用是獲取轉發者消息）
type: "get",
async: true,
url: 'SearchRepost',
dataType: 'json',
data:{
id:id,
_token: "{{ csrf_token() }}"
},
timeout: 100000,
success: function (list) {
//將獲取的數據進行處理，放置到應該放置的位置
var data = list['list'];
var item;
//ajax中用作循環輸出的方式
$.each(data, function (i, result) {
item = '<li>' +
'<span>' + result.user_id + '</span><span>' + result.name + '</span>'+
'</li>';
$(".wl-streamUL ul").append(item);
});
},
error: function (data) {
console.log('error');
}
});
document.getElementById('repost_text').value = content;
document.getElementById('repost_id').value = id;
document.getElementById('repost_count').value = repost_count;
document.getElementById('count').value = repost_count;
// $('.theme-popover-mask').fadeIn(100);
$('.theme-popover').slideDown(200);
//彈出框彈出后，將頁面按鈕所在div隱藏。
$(".newbody").hide();
$('.theme-poptit .close').click(function () {
// $('.theme-popover-mask').fadeOut(100);
$('.theme-popover').slideUp(200);
//把數據防止好了以后如果不將數據進行清空，數據會一直緩存在彈出框位置上面，這條語句是為了每一次關閉時將數據緩存進行清空。
$('.repost_ui').html("");
//彈出框彈出后，將頁面按鈕所在div顯示
$(".newbody").show();
}) } </script>
z-index:
彈出框的透明度。
position:
absolute :生成絕對定位元素，相對於static定位以外的第一個父元素進行定位；fixed ：生成絕對定位元素，相對於瀏覽器窗口進行定位；relative: 生成相對定位窗口，相對於其他正常位置進行定位； static: 默認值 ； inherit: 從父元素繼承position 屬性的值。
display: 這個屬性用於定義建立布局時元素生成的顯示框類型。對於 HTML 等文檔類型，如果使用 display 不謹慎會很危險，因為可能違反 HTML 中已經定義的顯示層次結構。對於 XML，由於 XML 沒有內置的這種層次結構，所有 display 是絕對必要的。
none: 此元素不會被顯示；
.theme-popover {
z-index: 9999;
/*z-index: 998;*/
/*z-index: -1;*/
position: fixed;
/*position: absolute;*/
top: 20%;
left: 20%;
width: 100%;
height: 100%;
/*margin:-180px 0 0 -330px;*/
border-radius: 5px;
border: solid 2px #666;
background-color: #fff;
display: none;
box-shadow: 0 0 10px #666;
}
.theme-poptit .close {
float: right;
color: #999;
padding: 5px;
margin: -2px -5px -5px;
font: bold 14px/14px simsun;
text-shadow: 0 1px 0 #ddd
}
彈出框設計：
通過 css 對彈出框進行樣式設計；同時通過對css 的監聽打開窗口；此外還有 js賦值；form提交等等；
{{--//彈出框--}}
<div class="theme-popover" style="width:700px ; height:500px">
<div class="theme-poptit">
<a href="javascript:;" title="關閉" class="close" style="color:black">×</a>
<h3></h3>
</div>
<div class="theme-popbod dform">
<form class="theme-signin" name="loginform" action="repost" method="post">
{{ csrf_field() }}
<ol>
<li>轉發到
<ul>
<li>我的微博</li>
<li>好友圈</li>
<li>私信</li>
</ul>
</li>
<li>轉發內容
<div>
<input id="repost_id" type="text" style="width:320px; height:100px" name="repost_id">
<input id="repost_text" type="text" style="width:320px; height:100px" name="repost_text"
readonly>
<input id="repost_count" type="text" style="width:320px; height:100px" name="repost_count"
hidden="hidden">
</div>
</li>
<li>
我想說:<br>
<input type="text" name="repost_content" id="repost_content">
</li>
<li>
<button>轉發</button>
</li>
</ol>
-- 當前已轉發 <input type="text" id="count" value="" style="width:40px" disabled> 次--
//用於放置ajax獲取數據的存放位置
<div class="wl-streamUL">
<ul class="repost_ui">
</ul>
</div>
</form> </div> </div>