html 中弹出遮罩层设置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >host</ title > < style > <!-- 隐藏设置--> .hide{ display: none; } <!-- 遮罩层样式--> .shade{ position: fixed; top:0; right: 0; left: 0; bottom: 0; background: black; opacity: 60%; z-index: 100; } <!-- 弹出层样式--> .add_modal{ position: fixed; height: 300px; width: 400px; top: 100px; left: 50%; z-index: 101; border: 1px solid red; background: white; margin-left: -200px; } </ style > </ head > < body > < h1 >主机信息(对象)</ h1 > < div > < input id = "add_host" type="button" value="添加" /> </ div > < table border="1"> < thead > < tr > < th >序号</ th > < th >主机名</ th > < th >IP</ th > < th >端口</ th > < th >业务线</ th > </ tr > </ thead > < tbody > {% for row in v1 %} < tr hid="{{ row.nid }}" bid="{{ row.b_id }}"> < td >{{ forloop.counter }}</ td > < td >{{ row.hostname }}</ td > < td >{{ row.ip }}</ td > < td >{{ row.port }}</ td > < td >{{ row.b.caption }}</ td > </ tr > {% endfor %} </ tbody > </ table > < div class="shade hide"> </ div > < div class="add_modal hide"> < form action="/cmdb/host" method="post"> < div class="group"> < input type="text" placeholder="主机名" name="hostname"/> </ div > < div class="group"> < input type="text" placeholder="IP" name="ip"/> </ div > < div class="group"> < input type="text" placeholder="端口" name="port"/> </ div > < div class="group"> < select name="b_id"> {% for row in b_list %} < option value="{{ row.id }}">{{ row.caption }}</ option > {% endfor %} </ select > </ div > < input type="submit" value="提交"> < input id="cancel" type="button" value="取消"> </ form > </ div > < script src="../../static/jquery-3.4.1.js"></ script > < script > $(function () { $('#add_host').click(function () { $('.shade,.add_modal').removeClass('hide'); }); $('#cancel').click(function () { $('.shade,.add_modal').addClass('hide'); }); }) </ script > </ body > </ html > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 上周热点回顾(1.20-1.26)
2019-04-04 ES磁盘分配不均问题