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

我想要达到的结果

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

你可以用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) {
                // 取消的操作
            }

        });

html代码执行是由上到下的，你把script放到上面，此时dom未渲染完成，所有未拿到#myDiv，使用了jQuery，你可以把代码放到$(function() { })中，里面的代码会在dom渲染后执行

$(function () {
      layer.open({
        type: 1,
        area: ['500px,500px'],
        title: "系统消息",
        // content:"出差",
        // content:"<div>褚楚</div>"
        //content:'<div>处处滴哦</div>'
        content: $("#myDiv")
        , btn: ['确定', '取消']
      })
})

不过一般会把script放到下面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="..." />
  <title>demo</title>
</head>
<body>
  
  <script src="..."></script>
  <script>
    ...
  </sciprt>
</body>
</html>