layer.open再次渲染html,子页面调用在父页面打开弹出层,渲染html

这篇具有很好参考价值的文章主要介绍了layer.open再次渲染html,子页面调用在父页面打开弹出层,渲染html。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  • 使用的版本 layui-v2.5.6
  • 是在父页面弹出层,显示;调用的是父页面的layer.open();

父页面:

<link href="/layui/css/layui.css" rel="stylesheet" />
<script src="/layui/layui.all.js"></script>
<script src="/script/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

        layui.use(['form', 'element', 'layer', 'util', 'laypage'], function () {
            var form = layui.form
                , layer = layui.layer
                , util = layui.util
                , element = layui.element
                , laypage = layui.laypage;    
        });
</script>

子页面

<link href="/layui/css/layui.css" rel="stylesheet" />
<script src="/layui/layui.js"></script>
<script src="/script/jquery-1.11.3.min.js"></script>
 <a class="button text-btn" href="javascript:pageConfig.publishWindow('108170163748288' );" style="background:#339900 ;color:#ffffff;padding:2px 4px;border-radius:3px;"><i class="layui-icon layui-icon-release"></i>发布</a>

<script type="text/template" id="win_publish_div">
    <div id="win_wzpublish" class="layui-form" style=" padding:20px; " lay-filter="winpublish">  
            <div class="layui-form" style="padding:20px;">
                <div class="layui-form-item">
                    <select name="selwin_wzpublish" id="selwin_wzpublish">
               <option value="">请选择发布到的栏目</option>
                       <option value="28a18413-9952-41d6-dc97-08dad8ef948e">头条新闻</option>
                       <option value="721171be-9c30-4f25-fa15-08dadb8890d7">勘研动态</option>
                       <option value="3e0ce84e-91a9-47cf-dc96-08dad8ef948e">通知公告</option>
           
                    </select>
                </div> 
                <div style=" ">  
                    <button class="layui-btn layui-bg-orange" id="btnPreview">发布预览</button>
                    <button class="layui-btn  " id="btnPublish" style="margin-left:30px;">确定发布</button>
                </div>
            </div> 
    </div>
</script>
  <script type="text/javascript">
        var parentDOM = top || window;
         layui.use(['laydate', 'form', 'element']   , function(){
            var laydate = layui.laydate;
            日期时间选择器
            //laydate.render({
            //    elem: '#orderPublishDate',
            //    type: 'datetime'
            //});
            //laydate.render({
            //    elem: '#orderEndPublishDate',
            //    type: 'datetime'
            //});

        });

 !function (p) {
            //发布窗口
            p.publishWindow = function (articleId) {
                var width = window.innerWidth - 30;
                if (window.innerWidth >= 1024) {
                    width = 900;
                }
                var boxSize = [width + 'px', '800px'];

                var index = parentDOM.layer.open({
                    type: 1,
                    offset: 'auto',
                    title: '发布文章',
                    area: boxSize, //宽高
                    content: $("#win_publish_div").html(),
                    success: function (layero, index, that) {
                        var winDom = parentDOM.$("win_wzpublish");
                        parentDOM.layui.form.render(null, "winpublish");
                        var   laydate = parentDOM.layui.laydate;

                        //日期时间选择器
                        laydate.render({
                            elem: '#orderPublishDate',
                            type: 'datetime'
                        });
                        laydate.render({
                            elem: '#orderEndPublishDate',
                            type: 'datetime'
                        });

                    }
                });
            }
 

        }(pageConfig);        

文章来源地址https://www.toymoban.com/news/detail-744588.html

到了这里,关于layer.open再次渲染html,子页面调用在父页面打开弹出层,渲染html的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于Html对父页面打开子页面Dialog()的使用

    ​作者在写项目的时候,遇到了一个很坑的问题,项目前端基于QUI,但是大部分是js + css实现。 ​有一个功能:列表页面使用Dialog()组件打开编辑、新增窗体,编辑、新增窗体点击提交关闭窗体,能够刷新列表页面,无论怎么百度就是找不到可以实现的方法,最终功夫不负有

    2024年03月20日
    浏览(33)
  • 渲染流程(上):HTML、CSS和JavaScript,是如何变成页面的?

    在上一篇文章中我们介绍了导航相关的流程,那导航被提交后又会怎么样呢? 就进入了渲染阶段。这个阶段很重要,了解其相关流程能让你“看透”页面是如何工作的,有了这些知识,你可以解决一系列相关的问题,比如能熟练使用开发者工具,因为能够理解开发者工具里面

    2024年02月16日
    浏览(55)
  • 渲染流程(下):HTML、CSS和JavaScript,是如何变成页面的?

    在上篇文章中,我们介绍了渲染流水线中的 DOM 生成、样式计算和布局三个阶段,那今天我们接着讲解渲染流水线后面的阶段。 这里还是先简单回顾下上节前三个阶段的主要内容:在 HTML 页面内容被提交给渲染引擎之后,渲染引擎首先将 HTML 解析为浏览器可以理解的 DOM;然后

    2024年02月15日
    浏览(44)
  • layer.open属性详解及layer.open弹出框使用post方法

    一、常用属性详解: 例子: 二:layer.open GET方式说明 如下段代码所示,是最常见的layer.open使用方式。这里有几点需要说明: type 基本层类型,layer提供了5种层类型。可传入的值有:0(信息框,默认)、1(页面层)、2(iframe层)、3(加载层)、4(tips层)。 layer.open其底层

    2024年02月16日
    浏览(48)
  • iframe/window.open/a三种标签打开新页面或新窗口设置请求头;实现免密登录

    对于前端来说,一般在登录获取token之后会把token存入缓存以及放置在Request Headers请求头中,但是使用iframe/window.open/a这三种标签打开新页面或新窗口是没有办法把请求头带过去的,这个时候就需要自己设置请求头,有如下有两种办法: 方法一(不推荐): 第一种方法可以说是最

    2024年02月12日
    浏览(62)
  • 怎么将拼接的字符串element组件通过“v-html“渲染到页面

    如上图所示,没那么多废话,直接上代码 html中 vue中

    2024年02月16日
    浏览(49)
  • 如何从 html 页面调用在 javascript 模块 (type=module) 中声明的函数

    首先,必须明确导出您的功能 其次,模块有它自己的范围(这是模块的全部意义),因此您需要将函数添加到全局范围。因此,要做到这一点,您必须运行一个脚本来导入该函数并将其添加到窗口对象: 现在你不需要这部分了 script type=\\\"module\\\" src=\\\"app.js\\\"/script 或者,您可以创

    2024年02月14日
    浏览(50)
  • HTML页面通过Web3JS连接智能合约并调用其中接口

    之前我们学习solidity 并用它编写了智能合约 登上区块链 然后也做了基本的测试 但是 其实在web3时代 前端依旧扮演者非常重要的角色 我们现在就来打通web3 从合约到页面的一个管理 首先 我们还是将自己的ganache环境起起来 然后 在我们之前智能合约的项目终端执行 将我们的智

    2024年02月16日
    浏览(55)
  • 【Unity】UGUI中Camera Depth,Canvas Sorting Layer、Order in Layer与Particle System渲染层级分析

    目录   前言 一、项目需求 二、Camera 1.Clear Flags 2.Culling Mask  三、Canvas 1.Sorting Layer 2.Order in Layer 四、Particle System 1.Sorting LayerID 与Order in Layer 总结         最近在做项目的过程中,发现项目中的部分3d模型会被粒子特效所遮挡,这并不是笔者想要的效果,于是经过一番面向

    2024年02月05日
    浏览(47)
  • 高德地图通过图层layer实现对海量点的可视化渲染

    在正文开始之前我先说说我为啥会使用这个技术来实现数据的可视化。 事情是这样的,我接手了一个项目,里面有个需求是在地图上标记出他们公司的产品的使用分布。我接手的时候呢,我前面的那位大哥是 使用marker点覆盖物,加上for循环来渲染实现的 ,可能他在维护这个

    2024年02月15日
    浏览(82)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包