JQuery 模态对话框

JQuery 模态

<!-- jquery模态框可扩展版本 -->
<!DOCTYPE html>
<html lang="en">
<head><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><meta charset="UTF-8"><title>Document</title><style>.hide{display:none;}.modal{position:fixed;left:50%;top:50%;width:500px;height:400px;margin-left:-200px;margin-top:-250px;z-index:10;background-color:white;}.shade{position:fixed;left:0;right:0;top:0;bottom:0;opacity:0.6;background-color:black;z-index:9;}p{text-align:center;}</style>
</head>
<body><input type="button" value="添加"><div class="container"><table border="1"><tr><td target="hostname">1.1.1.1</td><td target="port">80</td><td target="ip">192.168.1.101</td><td><input type="button" value="编辑"> | <input type="button" value="删除"></td></tr><tr><td target="hostname">1.1.1.2</td><td target="port">81</td><td target="ip">192.168.1.102</td><td><input type="button" value="编辑"> | <input type="button" value="删除"></td></tr><tr><td target="hostname">1.1.1.3</td><td target="port">82</td><td target="ip">192.168.1.103</td><td><input type="button" value="编辑"> | <input type="button" value="删除"></td></tr><tr><td target="hostname">1.1.1.4</td><td target="port">83</td><td target="ip">192.168.1.104</td><td><input type="button" value="编辑"> | <input type="button" value="删除"></td></tr></table></div><div class="modal hide"><p>主机：<input name="hostname" type="text"></p><p>端口：<input name="port" type="text"></p><p>地址：<input name="ip" type="text"></p><p><input type="button" value="取消"></p></div><div class="shade hide"></div><script src="jquery-1.12.4.js"></script><script>//添加按钮$('input[value="添加"]').click(function(){$('.hide').removeClass('hide');});//取消按钮$('input[value="取消"]').click(function(){$('input[type="text"]').val('');$('.modal,.shade').addClass('hide');});//编辑按钮$('input[value="编辑"]').click(function(){$('.hide').removeClass('hide');//获取点击前面标签var tds = $(this).parent().prevAll();tds.each(function(){//获取target值var tar_val = $(this).attr('target');//获取当前td的内容var con = $(this).text();//根据target寻找modal中的对应框，并写入内容$('.modal input[name="'+tar_val+'"]').val(con);});});//删除按钮$('input[value="删除"]').click(function(){$(this).parent().parent().remove();});</script>
</body>
</html>

JQuery 模态对话框相关推荐

jQuery模态对话框示例
使用自定义属性来完成: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签选择器: 基本选择器(同css) id选择器 $("#id")标签选择器 $('tagName')class选择器 $(".className")配合 ...
antd vue关闭模态对话框_如何在Bootstrap项目中用Vue.js替代jQuery
Bootstrap是 Web 开发最受欢迎的框架之一,没有比它开发响应式网站项目效率最高了. 随着Vue.js的逐渐流行,更多人们用它来控制页面元素,实现强大互动功能.而jQuery出现了一些技术落后 ...
使用javascript打开模态对话框
1. 标准的方法 <script type="text/javascript"> function openWin(src, width, height, show ...
手机网页里的模态对话框
今日帮朋友写了一个手机网页里用的模态对话框,防止自己日后忘记,所以mark一下.原理很简单,当弹出了模态对话框的时候,就是touchmove事件进行监听,如果是对话框的touchmove事件,就允许拖 ...
Bootstrap 模态对话框只加载一次 remote 数据的解决办法
前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过 ...
Bootstrap3 模态对话框的事件
模态对话框的事件 Bootstrap为模态对话框插件提供了 5 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 4‑2. 表 4‑2 modal插件的事件及含义事 ...
Bootstrap3 模态对话框的方法
模态对话框的方法 1..modal(options) 使用一个可选的对象参数 options调用模态对话框.如: $('#myModal').modal({ backdrop: false, ...
Bootstrap3 模态对话框的选项
模态对话框的选项 Bootstrap为模态对话框提供了 4 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 4‑1: 表 4‑1 modal插件的选项名称类型默 ...

JQuery 模态对话框

JQuery 模态

JQuery 模态对话框相关推荐

最新文章

热门文章