layer弹窗使用

代码&资源文件

layer弹窗使用.rar

1、文件目录

popup.html

2、引入资源文件

<script type="text/javascript" src="./src/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./layer/layer.js"></script>

3、新页面做弹窗内容

<a class="operation-btn add-btn" href="javascript:void(0)">Add</a>
    <script type="text/javascript">
        $(function(){
            $('.add-btn').click(function () {
                layer.open({
                    type: 2,
                    title: false,
                    area: ['200px', '250px'],
                    shade: [0],
                    content: ['popup.html']
                });
            });
        });
    </script>

效果:

4、隐藏div做弹窗内容

<a class="operation-btn add-btn" href="javascript:void(0)">Add</a>
<div id="m-div" style="display: none;">
    <span>xxxxxx1</span><br>
    <span>xxxxxx2</span><br>
    <span>xxxxxx3</span><br>
</div>

<script type="text/javascript">
$(function(){
    $('.add-btn').click(function () {
        layer.open({
        type: 1,
        title: false,
        area: ['300px', '350px'],
        shade: [0],
        content: $('#m-div')
        });
    });
});
</script>

效果:

原文地址:https://www.cnblogs.com/mg007/p/11193987.html

时间: 2024-08-30 14:44:07

layer弹窗使用的相关文章

layer弹窗第二个按钮

layer弹窗组件,第二个按钮是btn2,第三个按钮是btn3.千万别当成no了.哈哈. layer.alert('确定删除吗?', { title: '提示', icon: 0 ,//0:感叹号 1:对号 2:差号 3:问号 4:小锁 5:哭脸 6:笑脸 time: 0 ,//不自动关闭 btn: ['YES', 'NO'], yes: function(index) { layer.close(index); layer.msg('正在删除中...'); }, btn2: function(

layer弹窗的跳转功能

1,本弹窗直接跳转父页面: 1 @if(session('message')) 2 3 <script> 4 window.parent.location.reload(); //刷新父页面 5 var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 6 parent.layer.close(index); // 关闭layer 7 </script> 8 @endif 2,点击关闭弹窗后刷新当前页面: 只需在弹窗

layer弹窗

1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>layer-更懂你的web弹窗解决方案</title> 7 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> 8 <script

jquery layer弹窗弹层插件 小巧强大

/* 先去官网下载最新的js  http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id').on('click', function(){ layer.msg('test'); }); 下面主要贴出上述例子的调用代码: [信息框]: layer.alert('白菜级别前端攻城师贤心', 8); //风格一 layer.msg('前端攻城师贤心'); //风格二 //当然,远远不止这两

jquery layer弹窗弹层插件 (转)

/* 先去官网下载最新的js  http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id').on('click', function(){ layer.msg('test'); }); 下面主要贴出上述例子的调用代码: [信息框]: layer.alert('白菜级别前端攻城师贤心', 8); //风格一 layer.msg('前端攻城师贤心'); //风格二 //当然,远远不止这两

layer弹窗确定按钮:父页面调用子页面

实例: var index=layer.open({         type:2,         title: '选择节点任务',         closeBtn: 1,         area:['300px','400px'],         shade:[0.5, '#000000'],         maxmin:false,         btn: ['确定', '关闭'],         yes: function(index, layero){          

【Thinkphp5】结合layer弹窗 定制操作结果页面

1 打开应用公共文件页面    appliction/common.php,编写以下代码 注意: 成功消息的绿色背景部分是iframe 框架写法,如果是普通页面.就吧parent去除,改为: self.location.href="'.$url.'" /** * $msg 待提示的消息 * $url 待跳转的链接 * $icon 这里主要有两个,5和6,代表两种表情(哭和笑) * $time 弹出维持时间(单位秒) */ function alert_success($msg='',$

layer弹窗插件自带自写经验

复制可下载源代码和自写教程    链接: https://pan.baidu.com/s/1mhHa5Os 密码: j5su

layer弹出层中H5播放器全屏出错解决 &amp; 属性poster底图占满video的方法

1. 在layer弹窗组件中 如果使用了flash播放器,全屏是正常的 但若使用了HTML5的播放器,全屏失效 举个栗子 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-