通过jquery 打开新窗口,

 

<html 1> 

转发按钮所在: href 使用 javascript 监听, 通过 onclick 事件 reposted 到达 <script> </script> ,后续事件由 js 进行处理(在使用 onclick 方法时,顺便通过 :方法名('{{ 待传值}}' , '{{ }}'))将值传递给js ,以便后续赋值运算。

class =" newbody" 是为了 当js监听打开窗口时,隐藏页面按钮,防止弹出框弹出时还可以通过页面按钮改变弹出框内容。

  <div class="content newbody">

        {{--转发功能所在--}}
        <span ><a  href="javascript:void(0);" οnclick="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>

  

转载于:https://www.cnblogs.com/luxia/p/8135490.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值