jquery弹出层

layui:弹出层弹出html页面的方式

不打扰是莪最后的温柔 提交于 2020-03-08 12:30:07
layui弹出层的详细页面,除了在文档中有一些示例以外,更多的可以阅读独立网站: http://layer.layui.com/ 。 下面以点击按钮1弹出一个表单填写页面为例: layui.use(['element','jquery','layer'], function(){ var $ = layui.jquery; var element = layui.element; var layer = layui.layer; //alert $("#btn1").click(function(){ //input here layer.open({ type: 2, title: '请填写表单', shadeClose: true, shade: 0.8, area: ['580px', '90%'], shadeClose: false, content: 'Demo3-6.html' //iframe的url }); //input above }); }); 使用之前,先引入layer框架。首先监听btn1的按钮事件,点击时,open一个窗口,area为弹出窗口的大小,content为需要弹出的html页面的url。shadeClose为trues时,点击非弹出框的其他地方,弹出框消失。 完整例程 <!DOCTYPE html> <html> <head> <meta

frameset框架弹出层

江枫思渺然 提交于 2020-02-27 07:33:06
前段时间做项目,有个功能是消息提醒。 我相信很多大牛都做过。下面来分享我遇到的问题和解决方案。 首先我们的项目是用frameset框架,main代码。 <frameset name="myFrame" cols="85,*" frameborder="no" border="0" framespacing="0"> <frame src="${base}/left.jsp" name="leftFrame" frameborder="no" scrolling="auto" noresize="noresize" id="leftFrame" /> <frame src="${base}/welcome.jsp" name="mainFrame" frameborder="no" scrolling="auto" noresize="noresize" id="mainFrame" /> </frameset> 这样分了左右两个部分。 要求是无论在哪个页面当点击消息图标的时候。能再右下角弹出消息提示。 这个我还真没做过。当时查阅了很多的资料。然后先是找到了jquery的message插件。后来又找到了如何操作父框架的js,然后这个问题就解决了。 因为我left.jsp是菜单导航。它是不变的。所以我就把消息图标放在了left中。 left.jsp页面中的js函数: function

HTML5+CSS3+jQuery实现弹出层

淺唱寂寞╮ 提交于 2019-12-05 16:34:07
文章来源于helloweba.com 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式、甚至js方法调用。我们最终做出来的弹出层效果应该是响应式的,也就是说可以在桌面PC端和移动端都可以很好展示的弹出层,并且是兼容现代浏览器的。在demo中,我使用了Bootstrap样式,当然你也可以自己写个样式来完成页面布局。 一个基本的弹出层应该满足以下需求: 点击按钮/链接触发弹出层,弹出层应该有半透明的遮罩层; 点击弹出层的关闭按钮、取消按钮或者遮罩层会关闭隐藏弹出层; 使用Esc键也可以关闭弹出层; 它是响应式的,并且兼容现代主流浏览器。 HTML 首先我们在页面放置一个用来触发弹出层的链接,也可以是个按钮button,注意的是我们给它设置一个data-show-layer属性,这个属性值对应的就是弹出层的id,也就是说通过data-show-layer来关联弹出层。 <a class="btn btn-info btn-lg show-layer" data-show-layer="hw-layer" role="button">点击弹出层</a> 很显然,上面的链接关联的弹出层的id是hw-layer。那好,选择我们来准备弹出层hw-layer的html代码。 <div class="hw-overlay" id=

前端jsp用layer弹框层

匿名 (未验证) 提交于 2019-12-03 00:27:02
简单介绍下啊: layer是layui经典化的前端ui框架中的一个弹出层,可以在layui中用layer,也可以单独使用,单独使用是依赖于jquery,jquery版本至少在1.8之上 下载layui.js,layui.css,layer.js文件,下面提供下载地址 http://www.layui.com/ 好,步入正题 在项目中用的layer弹窗: 贴出项目中如何使用layer jsp页面引入js,css 然后页面加载layer layui.use('layer', function(){ var layer = layui.layer; }); 弹框代码: layer.open({ type:2, title:false,//不显示标题 closeBtn:0, shadeClose:true,//点击遮罩层关闭 content:'<%=request.getContextPath()%>/'+url,//要弹框页面的地址 maxmin:false, area:['410px','260px'],//弹框页面宽和高 moveOut: true, zIndex : layer.zIndex, success: function(layero,index){ layer.setTop(layero); if (layero && layero.length > 0) { var

div实现遮罩层效果( div弹出层,后面变色不可编辑转)

北战南征 提交于 2019-11-27 04:17:05
转自: http://forlab.iteye.com/blog/1767843 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" /> < title > Jquery遮罩层 </ title > < style type ="text/css" > #BgDiv { background-color : #e3e3e3 ; position : absolute ; z-index : 99 ; left : 0 ; top : 0 ; display : none ; width : 100% ; height : 100% ; opacity : 0.5 ; filter : alpha(opacity=50) ; -moz-opacity : 0.5 ; } #DialogDiv { position : absolute ;