<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 >
<input
readonly>
<input
hidden="hidden">
</div>
</li>
<li>
我想说:<br>
<input type="text" name="repost_content" >
</li>
<li>
<button>转发</button>
</li>
</ol>
-- 当前已转发 <input type="text" disabled> 次--
//用于放置ajax获取数据的存放位置
<div class="wl-streamUL">
<ul class="repost_ui">
</ul>
</div>
</form> </div> </div>
查看更多关于【Jquery】的文章
