A页面 嵌套 B页面的代码

主要处理  leaflet 的 marker 的 popopen,     marker的点击的显示/隐藏 pop   会导致pop中的页面的内容，消失，不在页面中，导致bootstrap的冻结表格实现不了（元素节点还没加载出来，自然冻结不了）

把B页面 嵌 在 A 页面的marker 的 弹窗中

A页面部分代码：

// ---------------点击弹出信息/str----------

        let marker = L.marker([31.749662, 120.63073]).addTo(map)

        marker.bindPopup(

            '<div style="width:100%;height:100%">'+

            '<iframe style="width:100%;height:100%;" frameborder=0 border=0 scrolling="no" name="iframe1" src="projectFXHG.html"></iframe>'+

            '</div>', { minWidth: 300, maxHeight: 320 })

B页面

　　

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>调用地图【EPSG：4490】</title>

    <link rel="stylesheet" href="./Lib/JS/bootstrap/css/bootstrap.css">

    <link rel="stylesheet" href="./Lib/JS/bootstrap-table/bootstrap-table.css">

    <link rel="stylesheet" href="./Lib/JS/bootstrap-table-fixed-columns-master/bootstrap-table-fixed-columns.css">

    <link rel="stylesheet" href="Lib/leaflet.css">

    <script src="Lib/jquery.min.js"></script>

    <script src="./Lib/JS/bootstrap/js/bootstrap.js"></script>

    <script src="./Lib/JS/bootstrap-table/bootstrap-table.js"></script>

    <script src="./Lib/JS/bootstrap-table-fixed-columns-master/bootstrap-table-fixed-columns.js"></script>

    <script src="./Lib/JS/echarts/echarts.js"></script>

    <script src="Lib/leaflet.js"></script>

    <script src="Lib/proj4.js"></script>

    <script src="Lib/proj4leaflet.js"></script>

    <script src="Lib/esri-leaflet_v2.2.4.js"></script>

    <style>

        html,

        body {

            margin: 0;

            padding: 0;

            width: 100%;

            height: 100%;

            font: 14px "Helvetica Neue", Arial, Helvetica, sans-serif;

        }

        .box {

            position: absolute;

            z-index: 1001;

            width: 100vh;

            color: white;

        }

        .infor {

            position: absolute;

            z-index: 1001;

            TOP: 20%;

            border: 1px green solid;

            height: 450px;

            background-color: white;

            color: #5e636c;

            display: flex;

            flex-direction: column;

            width: 300px;

        }

        .pop-li1 {

            border: 1px solid #d8dce5;

            width: 35%;

            padding: 5px;

        }

        .pop-li2 {

            border: 1px solid #d8dce5;

            width: 64%;

            padding: 5px;

        }

        .pop-table {

            margin-top: 9px;

        }

        .checked {

            border-bottom: 0px;

            background-color: #38a0f4;

        }

        #eventList:hover {

            cursor: pointer;

            background-color: #38a0f469;

        }

        #before24:hover {

            cursor: pointer;

            background-color: #38a0f469;

        }

        .leaflet-container a {

            color: black;

        }

        .leaflet-popup-content {

            width: 300px !important;

            height: 290px;

            background-color: #fff;

            position: relative;

            padding: 5px;

        }

        #map {

            margin: 0 auto;

            height: 100%;

            widows: 100%;

        }

    </style>

</head>

<body>

        <div style="width:100%;height:100%;">

                <div style="margin-bottom: 5px;"><div style="display: inline-block;width: 12px;height: 14px;background-color: #38a0f4;"></div><span style="color:#38a0f4;margin-left: 6px;">点位2</span></div>

                <ul class="nav nav-pills">

                <li id="eventList" class="active pop-li1 checked" onclick="checked()">报警事件列表</li>

                <li id="before24" class="pop-li2" onclick="initEcharts()">前后24小时污染物浓度趋势</li>

                </ul>

                <div class="tab-content pop-table">

                <div class="tab-pane active" id="A" style="height:200px;">

                <table id="poptable" class="table table-bordered table-hover"

                data-toggle="table"

                data-classes="table table-hover"

                data-show-columns="false"

                data-striped="true"

                data-show-toggle="false"

                data-search="false"

                data-show-refresh="false"

                data-toolbar="#toolbar"

                data-height="220"

                >

                <thead>

                <tr>

                <th>报警时间</th>

                <th>报警内容</th>

                </tr>

                </thead>

                <tr>

                <td>2018-08-18 08:30:34</td>

                <td>小时超标报警</td>

                </tr>

                <tr>

                <td>2018-08-18 08:30:34</td>

                <td>小时超标报警</td>

                </tr>

                <tr>

                <td>2018-08-18 08:30:34</td>

                <td>小时超标报警</td>

                </tr>

                <tr>

                <td>2018-08-18 08:30:34</td>

                <td>小时超标报警</td>

                </tr>

                <tr>

                <td>2018-08-18 08:30:34</td>

                <td>小时超标报警</td>

                </tr>

                <tr>

                <td>2018-08-18 08:30:34</td>

                <td>小时超标报警</td>

                </tr>

                </table>

                </div>

                <div class="tab-pane" id="B">

                <div style="display: flex;margin-top: 12px;">

                <div style="width: 26%;padding-top: 7px;"> 查询因子： </div>

                <div style="flex-grow:1">

                <select class="form-control">

                <option>SOz</option>

                <option>2</option>

                <option>3</option>

                <option>4</option>

                <option>5</option>

                </select>

                </div>

                </div>

                <div id="main" style="width: 300px;height:180px;overflow:auto;margin-top:15px"></div>

                </div>

                </div>

                </div>

    <script>

        function checked() {

            if ($("#eventList").hasClass("checked")) {

                $("#before24").removeClass("checked")

                $("#B").removeClass("active")

                $("#A").addClass("active")

            } else {

                $("#eventList").addClass("checked")

                $("#before24").removeClass("checked")

                $("#B").removeClass("active")

                $("#A").addClass("active")

            }

        }

        function initEcharts() {

            // $('.leaflet-popup-content-wrapper').css({'width':'283px','height': '232px'});

            $("#before24").addClass("checked");

            $("#eventList").removeClass("checked")

            $("#A").removeClass("active")

            $("#B").addClass("active")

            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据

            var option = {

                // 给echarts图设置背景色

                backgroundColor: '#FBFBFB',

                title: {

                    text: '2019-06-13',

                    textStyle: {

                        fontSize: '12'

                    }

                },

                tooltip: {

                    trigger: 'axis',

                    axisPointer: {

                        type: 'cross',

                        label: {

                            backgroundColor: '#6a7985'

                        }

                    }

                },

                legend: {

                    data: ['SQz']

                },

                grid: {

                    top: '20%',

                    left: '3%',

                    right: '4%',

                    bottom: '3%',

                    containLabel: true

                },

                xAxis: [{

                    axisLabel: {

                        rotate: 30,

                        interval: 0

                    },

                    type: 'category',

                    boundaryGap: false,

                    data: function () {

                        let list = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00']

                        return list;

                    }()

                }],

                yAxis: { type: 'value' },

                series: [{

                    name: 'SQz',

                    data: [820, 932, 901, 934, 1290, 1330, 1320],

                    type: 'line',

                    color: '#007bff',

                    smooth: true,

                    symbolSize: 10

                }]

            };

            // 使用刚指定的配置项和数据显示图表。

            myChart.setOption(option);

        }

    </script>

</body>

</html>

　　

leaflet 的 marker 弹框 iframe 嵌套代码的更多相关文章

  1. 分享一下在aspx页面弹框的设置代码

    public static class MessageBox { /// <summary> /// 显示消息提示对话框 /// </summary> /// <para ...

  2. 微信小程序之底部弹框预约插件

    代码地址如下:http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...

  3. layer弹框在实际项目中的一些应用

    官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,l ...

  4. vue 弹框

    弹框展示: 代码: <template> <div> <el-col :span="9" style="text-align: right; ...

  5. layer的iframe弹框中父子元素的传值

    项目中,左侧导航树,右侧是 iframe 嵌套的页面,在右侧页面中又有layer弹框,可以说是有两层 iframe 框架. 所以查询网上的parent什么的方法都不能用.自己摸索的下面的方法: 1.父 ...

  6. selenium常用api之切换：table切换、alert弹框切换、iframe框架切换

    10.查看浏览器打开了多少个table和当前页面在哪个table 测试:打开了浏览器后,打开了一个新的标签页之后,显示此时有2个table,浏览器中当前页面展示的是第2个页面,但是代码打印显示的仍然是 ...

  7. git 本地提交代码到 github 远程库，没有弹框 github login

     git 本地提交代码到 github 远程库,没有弹框 github login:  原因: win10 有个凭据管理器,给保存了历史登陆用户名密码,导致无法切换用户. 解决办法: 删除历史登陆用户 ...

  8. python selenium处理iframe和弹框（一）

    处理iframe和弹框 # encoding:utf-8 from selenium import webdriver import time driver = webdriver.Firefox() ...

  9. easyui 中iframe嵌套页面，提示弹窗遮罩的解决方法，parent.$.messager.alert和parent.$.messager.confirm

    项目中用到easyui 布局,用到north,west,center三个区域,且在center中间区域嵌入iframe标签.在主内容区做一些小提示弹窗(例如删除前的弹窗提示确认)时,会遇到遮罩问题,由 ...

随机推荐

  1. C语言：case详解

    C语言虽然没有限制 if else 能够处理的分支数量,但当分支过多时,用 if else 处理会不太方便,而且容易出现 if else 配对出错的情况.例如,输入一个整数,输出该整数对应的星期几的英 ...

  2. 【技巧】使用PPT更换背景色

    主要记述使用PPT来更换图片某一部分的背景色 把想要更改的图片粘贴到PPT里. 依次选择[格式][颜色][设置透明色],然后点击需要更改背景的地方 将自己的目标颜色复制一下,填充上去,选择[置于底层]

  3. .Net Core微服务——自动收缩、健康检查：Consul（三）

    继续上一篇的话题,顺便放上一篇的传送门:点这里. 健康检查 经过之前的操作,我的consul已经支持自动扩展,并且调用也很靠谱.但是这里有个问题,一旦服务列表里的某个服务挂了,consul并不知道,还 ...

  4. 在Java中，负数的绝对值竟然不一定是正数！！！

    绝对值是指一个数在数轴上所对应点到原点的距离,所以,在数学领域,正数的绝对值是这个数本身,负数的绝对值应该是他的相反数. 这几乎是每个人都知道的. 在Java中,想要获得有个数字的绝对值,可以使用ja ...

  5. PAT乙级：1053 住房空置率 (20分)

    PAT乙级:1053 住房空置率 (20分) 题干 在不打扰居民的前提下,统计住房空置率的一种方法是根据每户用电量的连续变化规律进行判断.判断方法如下: 在观察期内,若存在超过一半的日子用电量低于某给 ...

  6. 开源协同办公平台部署教程：O2OA PAAS平台部署

    一.镜像制作1.将安装介质o2server-5.0.3-linux.zip上传至镜像制作服务器上.(上传目录为/paas/xxhpaas/moka/o2oa)2.使用unzip命令解压安装包,参考命令 ...

  7. centos7 源码安装指定版本的php7

    很多时候可能会遇到需要手动源码安装软件的时候,所以自己实践了一把,并且把安装过程中遇到的问题,以及在网上找到的解决办法(实测有效)都记录下来,方便日后学习实践. 1. 系统环境 # cat /etc/ ...

  8. swagger是什么（十六）

    前言: swagger:神气十足,大摇大摆 在用Springboot进行开发时,有的实体类上用到了注解@ApiModelProperty("接受人代码"),特此整理此注解的出处及作 ...

  9. odoo里面批量上传图片

    import os import base64 def base_data_product_image(self): """ odoo里批量创建产品,并上传图片 图片为b ...

  10. shiro反序列化550、721

    shiro550反序列化 获取docker镜像 docker pull medicean/vulapps:s_shiro_1 重启docker systemctl restart docker 启动d ...