jQuery模态对话框示例
2024-05-10 00:52:19
使用自定义属性来完成：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.table{text-align: center;}.hide{display: none;}.modal{position: fixed;background-color: white;width: 500px;height: 400px;top:50%;left:50%;margin-left: -250px;margin-top: -300px;z-index:10;}.shadow{position: fixed;top:0;left:0;right:0;bottom:0;background-color: gray;opacity: 60%;z-index:9;}</style>
</head>
<body><div><input id="add" type="button" value="添加" /></div><table class="table" border="1"><thead><tr><td>IP</td><td>PORT</td><td>操作</td></tr></thead><tbody><tr><td target="ip">1.1.1.11</td><td target="port">80</td><td><a class="edit">编辑</a> | <a>删除</a></td></tr><tr><td target="ip">1.1.1.12</td><td target="port">80</td><td><a class="edit">编辑</a> | <a>删除</a></td></tr><tr><td target="ip">1.1.1.13</td><td target="port">80</td><td><a class="edit">编辑</a> | <a>删除</a></td></tr></tbody></table><div class="modal hide"><div><input type="text" name="ip"/><input type="text" name="port"/></div><div><input id="cancel" type="button" value="取消" /></div></div><div class="shadow hide"></div><script src="jquery-1.12.4.js"></script><script>//点击添加按钮，将蒙版层和模态框的hide样式去除$("#add").click(function(){$(".modal,.shadow").removeClass('hide');});//点击取消按钮，将蒙版层和模态框的hide样式加上$("#cancel").click(function(){$(".modal,.shadow").addClass('hide');});//点击编辑$('.edit').click(function(){$(".modal,.shadow").removeClass('hide');var tds = $(this).parent().prevAll(); //获取到“编辑”父标签前面的所有标签tds.each(function(){var target = $(this).attr('target'); //获取标签target属性的值var text = $(this).text(); //获取标签的文本内容$('.modal input[name ="'+ target + '"]').val(text); //将值传给输入框})})</script></body>
</html>使用索引来实现：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.hide{display: none;}.menu{height: 40px;background-color: #eeeeee;line-height: 40px;}.active{background-color: brown;}.menu .item{float: left;padding: 0 15px;border-right: 1px solid red;cursor: pointer; /*鼠标变小手*/}.content{height: 400px;border: 1px solid black;}.text{height: 400px;}</style>
</head>
<body><div style="width:700px; margin: 0 auto;"><div class="menu"><div class="item active">菜单一</div><div class="item">菜单二</div><div class="item">菜单三</div></div><div class="content"><div class="text" style="background-color: red;">内容一</div><div class="text hide" style="background-color: blue;">内容二</div><div class="text hide" style="background-color: darkgreen;">内容三</div></div></div><script src="jquery-1.12.4.js"></script><script>$(".item").click(function(){$(this).addClass("active").siblings().removeClass("active");var v = $(this).index(); //获取菜单标签的索引$(".content").children().eq(v).removeClass("hide").siblings().addClass("hide"); //eq(v)将菜单索引传给对应的内容索引});</script>
</body>
</html>jQuery模态对话框示例相关推荐
- JQuery 模态对话框
JQuery 模态 <!-- jquery模态框可扩展版本 --> <!DOCTYPE html> <html lang="en"> <h ...
- UI-Bootstrap 模态对话框示例
官网API: 点击打开链接 一.JS代码示例 define([ '{angular}/angular' ], function(angular) {'use strict';var optionLis ...
- jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签 选择器: 基本选择器(同css) id选择器 $("#id")标签选择器 $('tagName')class选择器 $(".className")配合 ...
- 变分模态分解_Android小部件示例中的模态对话框（弹出）
变分模态分解 在此示例中,我们将看到如何在主屏幕中创建一个可以打开弹出对话框的Android小部件. 如您所知,Android Widgets是小型应用程序,基本上可以做两件事. 按下时启动新的活动, ...
- antd vue关闭模态对话框_如何在Bootstrap项目中用Vue.js替代jQuery
Bootstrap是 Web 开发最受欢迎的框架之一,没有比它开发响应式网站项目效率最高了. 随着Vue.js的逐渐流行,更多人们用它来控制页面元素,实现强大互动功能.而jQuery出现了一些技术落后 ...
- QT中的模态对话框及非模态对话框
模态对话框(Modal Dialog)与非模态对话框(Modeless Dialog)的概念不是Qt所独有的,在各种不同的平台下都存在.又有叫法是称为模式对话框,无模式对话框等.所谓模态对话框就是在其 ...
- Qt中的模态对话框和非模态对话框
模态对话框及非模态对话框(详情见课本P51). 模态对话框:在没有被关闭之前,用户不能与同一个应用程序的其他窗口进行交互,直到该对话框关闭. 非模态对话框:当被打开时,用户既可选择和该对话框进行交互, ...
- 使用javascript打开模态对话框
1. 标准的方法 <script type="text/javascript"> function openWin(src, width, height, show ...
- 手机网页里的模态对话框
今日帮朋友写了一个手机网页里用的模态对话框,防止自己日后忘记,所以mark一下.原理很简单,当弹出了模态对话框的时候,就是touchmove事件进行监听,如果是对话框的touchmove事件,就允许拖 ...
最新文章
- 零起点学算法11——求梯形面积
- chown -r oracle:oinstall /oracle,ORA-17503: 因为CHOWN -R ORACLE:OINSTALL 导致的
- php++mpdf.mpdf,使用php第三方包mpdf将网页装换成pdf文件【2】
- 深入grootJs(进阶教程)
- 如何在word文档中添加附件
- [Swift]LeetCode793. 阶乘函数后K个零 | Preimage Size of Factorial Zeroes Function
- AS工程下gradle各文件（gradle.propertie等）与gradle配置（缓存等）讲述
- Java行为参数化（一）
- 14.6.3.1 The InnoDB Buffer Pool
- ltp︱基于ltp的无监督信息抽取模块
- Homebrew更换源
- C#属性详解及属性与函数间的对比
- 排除“使用主题 css 文件要求页上有标头控件。(例如 head runat=server /)”错误...
- Dubbo RESTful风格
- （16）Verilog模块例化-基本语法（四）（第4天）
- java.lang.OutOfMemoryError: Java heap space错误和方法(集、转)
- Python+OpenCV：直方图反向投影(Histogram Backprojection)
- 记一些tomcat的属性
- 如何在camera 驱动中配置HDR的曝光模块
- 对AD采样信号的简单滤波处理