通过jquery 打开新窗口,
<html 1>
转发按钮所在: href 使用 javascript 监听, 通过 onclick 事件 reposted 到达 <script> </script> ,后续事件由 js 进行处理(在使用 onclick 方法时,顺便通过 :方法名('{{ 待传值}}' , '{{ }}'))将值传递给js ,以便后续赋值运算。
class =" newbody" 是为了 当js监听打开窗口时,隐藏页面按钮,防止弹出框弹出时还可以通过页面按钮改变弹出框内容。
1 2 3 4 5 | <div class = "content newbody" > {{--转发功能所在--}} <span ><a href= "javascript:void(0);" onclick="reposted( ' {{$status->id }} ' , ' {{$status->content }} ' , '{{ $status->repost_count }}' )">转发 ({{ $status ->repost_count}})</a></span><br> </div> |
< js>
通过引用 .css 完成窗口弹出操作,设置弹出框的一些属性;
$().fadeIn() 慢进;$().slideDown() 通过使用滑动效果,显示隐藏的被选元素; $().hide() 隐藏选中的元素;
$().fadeOut() 满出; $().slideUp() 通过使用滑动效果,隐藏显示的被选元素; $().show()显示选中的元素;
新增加一个ajax方法,使用另外一种方法到达控制器,不是form表单提交的方式了。(此处使用ajax是功能需要,页面已经是弹出框监听了form页面提交了,不可以同时出现两个表单提交方法,但是数据还是必须要获取的,所以采用ajax方法)
1 2 3 4 5 6 7 8 9 10 11 | <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: 此元素不会被显示;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .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提交等等;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | {{-- //弹出框--}} <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> 次--<br> //用于放置ajax获取数据的存放位置<div class="wl-streamUL"><br> <ul class="repost_ui"><br><br> </ul><br></div></form> </div> </div> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· SQL Server统计信息更新会被阻塞或引起会话阻塞吗?
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 本地部署 DeepSeek:小白也能轻松搞定!
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 普通人也能轻松掌握的20个DeepSeek高频提示词(2025版)