先看一下弹层的效果：

点击确定跳转百度页面，点击取消弹层消失。

我这个弹层是在layui找的，

1. 需要layui.css文件和layui.js文件　　(想我这样笨的人，没有同学的告知，我都不知道去哪里下载这两个文件)

　　1.1：

　　

1.2：

　

　1.3：

2.代码：





<%--
  Created by IntelliJ IDEA.
  User: 秀清风
  Date: 2019/1/4
  Time: 20:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page language="java" contentType="text/html; utf-8" isELIgnored="false" pageEncoding="utf-8" %>
<html>
<head>
<meta charset="utf-8">

<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Title</title>
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<script src="/layui-authtree-master/layui/layui.js" charset="utf-8"></script>
<script>
layui.use('layer', function(){ //独立版的layer无需执行这一句
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        //触发事件
var active = {

notice: function(){
//示范一个公告层
layer.open({
type: 1
,title: false //不显示标题栏
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro' //设定一个id，防止重复弹出
,btn: ['确定', '取消']
,btnAlign: 'c'
,moveType: 1 //拖拽模式，0或者1
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你是猪吗？亲！<br><br><br>a猪猪猪猪<br><br>qqqq<br><br>qwq</div>'
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
href: 'http://www.layui.com/'
,target: '_blank'
});
                    }
                });
            }

        };

        $('#layerDemo .layui-btn').on('click', function(){
var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

    });
</script>
<body>

<div class="site-demo-button" id="layerDemo" style="margin-bottom: ;">
<button data-method="notice" class="layui-btn">点我我就可以弹出一个弹层哦哦哦</button>
</div>
</body>
</html>




注意事项：




　　功能：如果你想点击确定之后发生一些你想做的事情：


更多样式请参考layui官网：https://www.layui.com/


 
												


											
java 实现一个beautiful的弹层和具体功能的更多相关文章
	

    
								
  1. jquery layer插件弹出弹层 结构紧凑，功能强大
		
    /* 去官方网站下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 事件触发炸弹层可以自由绑定,例如: $('# ...
    
		
    2. 
						
  2. 弹层组件-layer
		
    layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...
    
		
    3. 
						
  3. 弹层，iframe页面
		
    前台页面: <img src="chb/老玩家 好礼送.jpg" border="0" width="202" height=&quo ...
    
		
    4. 
						
  4. jQuery Layer 弹层组件
		
    layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...
    
		
    5. 
						
  5. 借用layer让弹层不限制在iframe内部
		
    使用方法: 1 除了layer的success,end,cancel回掉函数以外其它的layer参数都可以使用. 2 使用前在layer的js后边把该js引入(可以命名为layerExtend). 3 ...
    
		
    6. 
						
  6. jquery layer弹窗弹层插件 小巧强大
		
    /* 先去官网下载最新的js  http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id ...
    
		
    7. 
						
  7. 为什么用 Java：一个 Python 程序员告诉你
		
    这篇文章专门给程序员写的,普通读者慎入.原作者:Kevin Sookocheff 译者:Celia Zhen,原文点击文末链接. 每当我告诉别人我一直在用Java工作时,大家的反应都是: “纳尼!Ja ...
    
		
    8. 
						
  8. 为Android系统内置Java应用程序测试Application Frameworks层的硬件服务
		
    我们在Android系统增加硬件服务的目的是为了让应用层的APP能够通过Java接口来访问硬件服务.那么, APP如何通过Java接口来访问Application Frameworks层提供的硬件服务 ...
    
		
    9. 
						
  9. 富文本编辑器UEditor自定义工具栏（二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符）
		
    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. python基础 (函数名,闭包,和迭代器)
			
    1.函数名作用 函数名本质上就是函数的内存地址或对象. 1.可以被引用 2.可以被当作容器类型的元素 3.可以当作函数的参数和返回值 4.如果记不住的话,那就记住一句话,就当普通变量用 2.闭包 什么 ...
    
			
    2. 
						
  2. 如何打开用eclipse没有.project文件的Java工程
			
    大概分为以下7个步骤,具体如下: 1.在你的eclipse下新建一个与你想要打开的源代码项目同名的一个项目(我这举例叫myweb). 2.在电脑磁盘中找到刚刚新建的项目,把它生成的.project文件 ...
    
			
    3. 
						
  3. oracle  不等於的問題<> !=
			
    簡單的查詢 SELECT * FROM sap_zcsp WHERE 欄位<>'X' 顯示不出為null的數據,必須帶上 IS null 查詢后得知:null 只能通過IS null 或者 ...
    
			
    4. 
						
  4. Dockerfile制作自定义镜像
			
    本文介绍最精简的Dockerfile文件构建镜像,Docker启动的时候可以启动一个shell脚本 1.首先编写Dockerfile文件 说明 1.启动的这个shell脚本一定是不退出的,比如服务器的 ...
    
			
    5. 
						
  5. OO学期总结
			
    一.测试与正确性论证差异对比 测试,顾名思义,就是用一些有意义或无意义的输入去检测程序的正确性或鲁棒性,因其直观明了所以在写简单的程序时我们能迅速找出bug并加以解决.并且,这种方式是绝对客观的,只要 ...
    
			
    6. 
						
  6. 修改pudb颜色
			
    2019-02-19,18点20vim调整颜色vim ~/.vimrc 这个pudb的配色用上的方法改不了.调试状态时候按o和回车能切换console和调试界面. 成功了.通过修改pudb源代码来实现 ...
    
			
    7. 
						
  7. 关于jquery的选择器中的空格问题
			
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
			
    8. 
						
  8. 每天五分钟，玩转Docker。
			
    Docker技术在国内如火如荼的流行了起来,我当然也想要赶上这时髦的技术啦.下面,我将重新拾起一年多未用的Docker,继续我的云计算之路. Day 1  学习Docker,先从Docker的命令行工 ...
    
			
    9. 
						
  9. Alpha冲刺四
			
    第四天    日期:2018/6/19 1.1 今日完成任务情况以及遇到的问题. 成员 汝春瑞.曹  阳 赵红波.梁玉龙 傅  康.丁炜轩 今日完成任务 设计餐厅每个店家的餐品界面 完成公告和失物招领 ...
    
			
    10. 
						
  10. 计蒜客	2019 蓝桥杯省赛 B 组模拟赛（三）数字拆分
			
    #include<iostream> #include<cstring> #include<cstdio> #include<algorithm> us ...
    
			
    11.