模态框

开发工具与关键技术:HTML、JS
作者:LJR
撰写时间:2019年 5 月 21 日
  1. 在平常的网页中,点击某一个按钮的时候弹出一个模态框,要弹出这个模态框的功能,其实很容易的,以下面的一个模态框为例子说明模态框的实现是怎么样的,在这个模态框里面有两个选择按钮,可以选择相对应的架构,左边是有一个选择区域的部分,右边则是一个表格。
    在这里插入图片描述

  2. 为了网页能够用响应式,代码中应用了bootstrap-4.1.3和layui.js的插件,用这两个插件去实现模态框的内容,弹出模态框,则需要在最外层的div加入modal这个类,并且给它一个id值,因为在点击相对应的按钮时,则调用这个id的相对应的方法,让它从隐藏显示出来,模态框的其它内容则相对应的用插件添加进出,那两个架构的按钮就是用两个input标签去实现的,只是应用了layui的插件的方法。
    在这里插入图片描述

  3. 左边部分选择区域的内容,还是用到插件的代码去实现的,右边的表格,才是模态框的重点,这是模态框弹出来的目的,不过这里表格只需要给它一个table就好,表格里的列是需要JQuery去渲染后从数据库去查数据的,所以这里要给它一个id值,让表格在渲染的时候,直接获取这个ID值。
    在这里插入图片描述

  4. 渲染表格的时候,首先要在前面声明这几个变量: var tabManagers; var layerIndex = 0; var layer, layuiTable;然后在页面加载的时候: $(function () { layui.use([‘layer’, ‘table’], function () { layer = layui.layer, layuiTable = layui.table; “表格的渲染!!!” }); });页面加载就开始渲染表格,把下面的代码写入表个渲染的地方就可以的,这只是个模板,并没有将从数据库查询数据,在查询数据的时候,只要把查询到相对应的字段填入file里面即可。这样一个模态框的内容就完全出来了。

在这里插入图片描述

版权声明:本文为weixin_44546758原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44546758/article/details/90640580

智能推荐

bireme数据源同步工具--debezium+kafka+bireme

1、介绍 Bireme 是一个 Greenplum / HashData 数据仓库的增量同步工具。目前支持 MySQL、PostgreSQL 和 MongoDB 数据源 官方介绍文档:https://github.com/HashDataInc/bireme/blob/master/README_zh-cn.md 1、数据流 Bireme 采用 DELETE + COPY 的方式,将数据源的修改记...

一致性hash算法

散列(hash)在我看来就是一个数组,而与数组不同的点在于数组是按顺序写入的,而hash是按照一定的hash算法确定元素在数组中的位置的。hash最难的问题在于会有冲突出现,如果两个object根据相应的hash算法得出的值一样便产生了hash冲突。在所有解决hash冲突的方法中,我最欣赏的是链式解决法,即将hash到同一位置的元素用链表连接。当然还有其它几种处理hash冲突的算法,比如建立公共溢...

OpenCV-Python learning-1.安装,图片读取显示

1. OpenCV与OpenGL区别 https://www.zhihu.com/question/20212016 一个是让机器识别东西的,OpenCV是给电脑做眼睛的。 一个是让机器计算出更好画面的,OpenGL用在游戏渲染方面很多。 OpenCV(Open Source Computer Vision Library)是一个基于(开源)发行的跨平台计算机视觉库,OpenGL(全写Open G...

Mycat+Mysql分布式架构改造和性能压力测试

架构实现 Mycat作为数据库高可用中间件具备很多的功能,如负载均衡,分库分表,读写分离,故障迁移等。结合项目的实际情况,分库分表功能对于关联查询有很高的要求,需要从业务角度考虑分库分表后的关联查询SQL的分析,业务代码动作较大,所以在此方案中我们不考虑分库分表。主要应用Mycat的负载均衡及故障迁移的功能即可。 整个架构改造包括两个部分,第一是单例Mysql改为多个Mysql,同时负载均衡,并且...

人脸识别之疲劳检测(二)阈值法、KNN分类和K-means聚类

Table of Contents 1、均值法 2、中值法 3、KNN 4、K-means 结合上一节在获得人眼特征点后需要对睁眼闭眼状态做出判断,方法的选择需要经验结合公平的评价方法,使用大量测试集得到不同方法下的精确度并做出比较: 1、均值法 50帧睁眼数据取均值,得到不同阈值下精确度。 2、中值法 50帧睁眼数据取中值,得到不同阈值下精确度。 3、KNN KNN是一种ML常用分类算法,通过测...

猜你喜欢

CodeForce Tic-Tac-Toe

Two bears are playing tic-tac-toe via mail. It's boring for them to play usual tic-tac-toe game, so they are a playing modified version of this game. Here are its rules. The game is played on the foll...

Python雾里看花-抽象类ABC (abstract base class)

首先认识模块 abc,python中没有提供抽象类与抽象方法,然而提供了内置模块abc来模拟实现抽象类,例如提供泛映射类型的抽象类 abc.MutableMapping 继承abc.MutableMapping构造一个泛映射类型(类似python中的dict) 当然继承abc.Mapping 也可以,毕竟MutableMapping是其子类 dict是python中典型的映射类型数据结构,其接口的...

python 文件操作

2, with open (‘xx.txt’,‘w’,encoding=‘utf-8’) as f: f.write(‘文件内容或对象’)...

【Python基础】使用统计函数绘制简单图形

机器学习算法与自然语言处理出品 @公众号原创专栏作者 冯夏冲 学校 | 哈工大SCIR实验室在读博士生 2.1 函数bar 用于绘制柱状图 2.2 函数barh 用于绘制条形图 2.3 函数hist 用于绘制直方图 直方图与柱状图的区别 函数pie 用于绘制饼图 2.5 函数polor 用于绘制极线图 极线图是在极坐标系上绘出的一种图。在极坐标系中,要确定一个点,需要指明这个点距原点的角...

css:顶部按钮固定,上面内容滑动

这种需求我们平时见到很多的,实现方法也多的参差不齐,下面我说一种简单的。如图: 可以看到只有红线部分滚动,底下按钮是固定的。 代码...