jQuery 模态对话框示例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .hide{

             display: none;

         }

         .modal{

             position: fixed;

             top: 50%;

             left: 50%;

             width: 500px;

             height: 400px;

             margin-left: -250px;

             margin-top: -250px;

             background-color: #eeeeee;

             z-index: 10;

         }

         .shadow{

             position: fixed;

             top: 0;

             left: 0;

             right: 0;

             bottom: 0;

             opacity: 0.6;

             background-color: black;

             z-index: 9;

         }

     </style>

 </head>

 <body>

     <a onclick="addElement();">添加</a>

     <table border="1" id="tb">

         <tr>

             <td target="hostname">1.1.1.11</td>

             <td target="port">80</td>

             <td target="ip">80</td>

             <td>

                 <a class="edit">编辑</a> | <a class="del">删除</a>

             </td>

         </tr>

         <tr>

             <td target="hostname">1.1.1.12</td>

             <td target="port">80</td>

             <td target="ip">80</td>

             <td>

                 <a class="edit">编辑</a> | <a class="del">删除</a>

             </td>

         </tr>

         <tr>

             <td target="hostname">1.1.1.13</td>

             <td target="port">80</td>

             <td target="ip">80</td>

             <td>

                 <a class="edit">编辑</a> | <a class="del">删除</a>

             </td>

         </tr>

         <tr>

             <td target="hostname">1.1.1.14</td>

             <td target="port">80</td>

             <td target="ip">80</td>

             <td>

                 <a class="edit">编辑</a> | <a class="del">删除</a>

             </td>

         </tr>

     </table>

     <div class="modal hide">

         <div>

             <input name="hostname" type="text"  />

             <input name="port" type="text" />

             <input name="ip" type="text" />

         </div>

         <div>

             <input type="button" value="取消" onclick="cancelModal();" />

             <input type="button" value="确定" onclick="confirmModal();" />

         </div>

     </div>

     <div class="shadow hide"></div>

     <script src="jquery-1.12.4.js"></script>

     <script>

         $('.del').click(function () {

             $(this).parent().parent().remove();

         });

         function  confirmModal() {

             var tr = document.createElement('tr');

             var td1 = document.createElement('td');

             td1.innerHTML = "11.11.11.11";

             var td2 = document.createElement('td');

             td2.innerHTML = "8";

             var td3 = document.createElement('td');

             td3.innerHTML = "80";

             var td4 = document.createElement('td');

             td4.innerHTML = "编辑";

             var td5 = document.createElement('td');

             td5.innerHTML = "删除";

             $(tr).append(td1);

             $(tr).append(td2);

             $(tr).append(td3);

             $('#tb').append(tr);

             $(".modal,.shadow").addClass('hide');

 //            $('.modal input[type="text"]').each(function () {

 //                // var temp = "<td>..."

 //

 //

 //

 //            })

         }

         function  addElement() {

             $(".modal,.shadow").removeClass('hide');

         }

         function cancelModal() {

             $(".modal,.shadow").addClass('hide');

             $('.modal input[type="text"]').val("");

         }

         $('.edit').click(function(){

             $(".modal,.shadow").removeClass('hide');

             // this

             var tds = $(this).parent().prevAll();

             console.log(tds)

             tds.each(function () {

                 // 获取td的target属性值

                 var n = $(this).attr('target');

                 // 获取td中的内容

                 var text = $(this).text();

                 var a1 = '.modal input[name="';

                 var a2 = '"]';

                 var temp = a1 + n + a2;

                 $(temp).val(text);

             });

 //            var port = $(tds[0]).text();

 //            var host = $(tds[1]).text();

 //

 //            $('.modal input[name="hostname"]').val(host);

 //            $('.modal input[name="port"]').val(port);

             // 循环获取tds中内容

             // 获取 <td>内容</td> 获取中间的内容

             // 赋值给input标签中的value

         });

     </script>

 </body>

 </html>

jQuery 模态对话框示例的更多相关文章

15款基于 jQuery模态对话框
在数字世界的竞争已大大增加.这就是为什么要确保网络设计的各个方面都是一流的,这是很重要的.从布局到一些非常小的东西,比如对话框,每一件都需要设计得很好.对话框通常被忽视,但它们可能对访问者有很大的影响 ...
JavaScript内容梳理示例之模态对话框示例之全选和反选以及取消示例之后台管理左侧菜单
<!DOCTYPE html>  <html lang="en"> <head> <meta c ...
jquery 模态对话框传值,删除,新增表格行
个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...
jQuery UI 对话框（Dialog） - 模态表单
<!doctype html><html lang="en"><head> <meta charset="utf-8" ...
QT创建模态对话框阻塞整个应用程序和非模态对话框唯一性约束的简单示例
QT创建模态对话框阻塞整个应用程序和非模态对话框唯一性约束的简单示例部分代码: // 创建模态对话框阻塞整个应用程序和非模态对话框唯一性约束 QMenu *pDialog = mBar->ad ...
jQuery练习 | 模态对话框（添加删除）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
jQuery cxDialog 对话框
cxDialog 是基于 jQuery 的对话框插件,支持自定义外观样式,同时兼容 Zepto,方便在移动端使用. 版本: jQuery v1.7+ | Zepto v1.0+ jQuery cxDi ...
为Bootstrap模态对话框添加拖拽移动功能
请自行下载使用到的Bootstrap库及jQuery库 <!DOCTYPE html> <html> <head lang="en"> < ...

随机推荐

Xcode7.1环境下上架iOS App到AppStore 流程③(Part 三)
前言部分 part三部分主要讲解 Xcode关联绑定发布证书的配置.创建App信息.使用Application Loader上传.ipa文件到AppStore 一.Xcode配置发布证书信息 1)给 ...
【特种兵系列】String中的==和equals()
1. 小样示例 public static void main(String[] args) { String a = "a" + "b" + 123; Str ...
流程控制和循环.png
H5——表单验证新特性，注册模态框！
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
正则表达式在iOS中的运用
1.什么是正则表达式正则表达式,又称正规表示法,是对字符串操作的一种逻辑公式.正则表达式可以检测给定的字符串是否符合我们定义的逻辑,也可以从字符串中获取我们想要的特定部分.它可以迅速地用极简单的方式 ...
SQL基础(3)-索引/触发器/视图操作
本文只列出索引,触发器,视图的简单操作语句 1.索引 a.创建 create index idx_name on fdh_client_info(name); --普通索引(单列索引) create ...
windows下redis安装
最近因公司项目原因,去了趟昆明出差,其中第一次接触安装redis,配置sentinel,学习到不少,但也都是皮毛而已,本随笔记下所学知识. 1.首先介绍下redis,来源自百度百科 redis是一个k ...
MDK st-link下载STM32程序出现Internal command error和Error:Flash download failed. Target DLL
MDK st-link下载STM32程序出现Internal command error和Error:Flash download failed. Target DLL 是因为目标板的芯片处于休眠 ...
ubuntu中用户使用的shell如何指定
在机器上给同事开了一个账号,结果ssh登陆后,补全,高亮都没有,但是我自己的账号都可以．首先怀疑是.bashrc文件设置有问题,对比2个用户目录的这个文件并未发现可以的地方．搜索得知可能是所使用的sh ...
基于H5的微信支付开发详解
这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

jQuery 模态对话框示例

jQuery 模态对话框示例的更多相关文章

随机推荐

热门专题