等六月花开 2022-04-28 09:46 采纳率: 100%
浏览 37
已结题

layui.open弹框content:"$(#myDiv)"【layui弹出层open弹<div>】

问题遇到的现象和发生背景

一般来说都是二的写法,我在项目中就是这样。结果我在网上的视频看见的一的写法.是成功的,想着还有没有别的方法

问题相关代码,请勿粘贴截图
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>申请单的下载与使用</title>
        <!-- layui的核心CSS文件 -->
        <link rel="stylesheet" type="text/css" href="layui-v2.6.8/layui/css/layui.css"/>
        <!-- layui的核心JS文件 -->
        <script src="layui-v2.6.8/layui/layui.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
        
        //_我把<div>写在<head><body>中间 <body>中间写<script>(layui.open的代码)是可以运行的_
        
    </head>
    
    <div class="myDiv" id="myDiv">
        我是mydiv的内容
    </div>
    
    <body>
        
        <script type="text/javascript">
                    layui.use(['layer','jquery'], function(){
                        var $ = layui.jquery;
                      var layer = layui.layer;
                      //layer.msg('hello');
                    });
                    layer.open({
                        type:1,
                        area: ['500px,500px'],
                        title:"系统消息",
                        // content:"出差",
                        // content:"<div>褚楚</div>"
                        //content:'<div>处处滴哦</div>'
                        content:$("#myDiv")
                        ,btn:['确定','取消']
                    })
                </script>
        
        <div id="sqd">
            申请单下载.doc
        </div>
    </body>
</html>


运行结果及报错内容

img

我的解答思路和尝试过的方法

而如果这样

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>申请单的下载与使用</title>
        <!-- layui的核心CSS文件 -->
        <link rel="stylesheet" type="text/css" href="layui-v2.6.8/layui/css/layui.css"/>
        <!-- layui的核心JS文件 -->
        <script src="layui-v2.6.8/layui/layui.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
        
        <script type="text/javascript">
                    layui.use(['layer','jquery'], function(){
                        var $ = layui.jquery;
                      var layer = layui.layer;
                      //layer.msg('hello');
                    });
                    layer.open({
                        type:1,
                        area: ['500px,500px'],
                        title:"系统消息",
                        // content:"出差",
                        // content:"<div>褚楚</div>"
                        //content:'<div>处处滴哦</div>'
                        content:$("#myDiv")
                        ,btn:['确定','取消']
                    })
                </script>
        
    </head>
    
    
    
    <body>
        
        
        <div class="myDiv" id="myDiv">
            我是mydiv的内容
        </div>
        <div id="sqd">
            申请单下载.doc
        </div>
    </body>
</html>


img

我想要达到的结果

我想要第二种的写法 有第一种的效果,因为目前我在做的这个项目需要这样做?有没有办法能实现的

  • 写回答

2条回答 默认 最新

  • 黑白码农 2022-04-28 10:32
    关注

    你可以用type =2 的,把内容页做到新的页面,

    img

    layer.open({
                type: 2,
                // maxmin: true,
                content: [url, 'yes'],  //yes表示显示滚动条
                title: '详细',
                area: ['70%', '60%'],
                end: function () {
                    //location.reload();
                },
                //closeBtn: 1,
                offset: '20px',
                shift: 4,
                skin: 'layui-layer-rim',
                btn: ['确定', '关闭'],
                success: function(layero, index) {},
                // 确定的操作$("input[name$='news']")
                btn1: function(index, layero) {
                    var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象,执行iframe页的方法:
                    //自己的处理
                    console.log( tasktime );
                    layer.close(index);//需要手动关闭窗口
                },
                cancel: function(index, layero) {
                    // 取消的操作
                }
    
            });
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 5月6日
  • 已采纳回答 4月28日
  • 创建了问题 4月28日

悬赏问题

  • ¥15 宇视监控服务器无法登录
  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
  • ¥50 STM32单片机传感器读取错误
  • ¥50 power BI 从Mysql服务器导入数据,但连接进去后显示表无数据
  • ¥15 (关键词-阻抗匹配,HFSS,RFID标签天线)