<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.hide{
display: none;
}
.shadow{
position: fixed;
top:0;
right:0;
bottom:0;
left:0;
background-color: black;
opacity: 0.6;
z-index: 8;
}
.modal{
position: fixed;
background-color: #eeeeee;
border: 1px solid grey;
width: 450px;
height: 300px;
top:250px;
left:50%;
margin-left:-220px;
z-index: 10;
}
.host{
width:300px;
height:280px;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>主机</th>
<th>端口</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>10.0.0.1</td>
<td>80</td>
<td><a>编辑</a>|<a>删除</a></td>
</tr>
<tr>
<td>10.0.0.2</td>
<td>81</td>
<td><a>编辑</a>|<a>删除</a></td>
</tr>
<tr>
<td>10.0.0.3</td>
<td>82</td>
<td><a>编辑</a>|<a>删除</a></td>
</tr>
</tbody>
</table>
</div>
<div class='shadow'>
</div>
<div class="modal">
<div class='host'>
<div>主机<input type="text" name="host" value=""></div>
<div>端口<input type="text" name='port' value=""></div>
<div><input type="button" value="取消" ></div>
</div>
</div>
</body>
</html>

modal html的更多相关文章

  1. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. 学会用bootstrap的modal和carousel

    bootstrap框架提供了很多好用的javascript组件,可以很方便的实现常用的js效果,比如点击弹出一个div(modal).下拉菜单.旋转木马(carousel或slider),非常适合前端 ...

  3. angularjs 弹出框 $modal

    angularjs 弹出框 $modal 标签: angularjs 2015-11-04 09:50 8664人阅读 评论(1) 收藏 举报  分类: Angularjs(3)  $modal只有一 ...

  4. yii2 modal弹窗之ActiveForm ajax表单异步验证

    作者:白狼 出处:http://www.manks.top/yii2_modal_activeform_ajax.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位 ...

  5. yii2中如何使用modal弹窗之基本使用

    作者:白狼 出处:http://www.manks.top/yii2_modal_baseuse.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, ...

  6. Yii2 modal中 ajax提交表单

    view: // view 代码 $form = ActiveForm::begin(['id' => $model->formName()]); // js 代码 $js = <& ...

  7. js控制Bootstrap 模态框（Modal）插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  8. 解决select2在bootstrap的modal中默认不显示的问题

    在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题.代码解决如下: ...

  9. 关于Delphi错误：Cannot make a visible window modal

    Delphi的fsMDIChild类型的窗体是不能使用ShowModal的,否则会弹出"Cannot make a visible window modal"异常, 但是把fsMD ...

  10. semantic modal 首次弹出位置不正确()

    暂不知是什么原因,先记录下,可以用下面这句css解决 .ui.modal{ %; }

随机推荐

  1. linux启动流程梳理【转】

    接触linux系统运维已经好几年了,常常被问到linux系统启动流程问题,刚好今天有空来梳理下这个过程:一般来说,所有的操作系统的启动流程基本就是: 总的来说,linux系统启动流程可以简单总结为以下 ...

  2. 【CF1016F】Road Projects（贪心）

    题意:给你一棵n 个节点的树,定义1到n的代价是1到 n节点间的最短路径的长度. 现在给你 m 组询问,让你添加一条边权为 w 的边(不与原图重复),求代价的最大值.询问之间相互独立. 1≤n,m≤3 ...

  3. 【Android开发日记】之入门篇（一）——开发环境的搭建

    写给自己的话:至此,大学的时光已经剩下一年的时光,下一年等毕业设计结束后就算是正式地踏入社会.自己学android也不过几个月的时间,为了更好管理文档,写点东西记录下自己曾经做过的点点滴滴是一个不错的 ...

  4. 在 Flask 项目中解决 CSRF 攻击

    #转载请留言联系 1. CSRF是什么? CSRF全拼为Cross Site Request Forgery,译为跨站请求伪造. CSRF指攻击者盗用了你的身份,以你的名义发送恶意请求.包括:以你名义 ...

  5. python接口自动化9-https请求（SSL）【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/python%E6%8E%A5%E5%8F%A3%E8%87%AA%E5%8A%A8%E ...

  6. 腾讯云通信WebIM事件回调的坑~

    最近在开过工作中用到了腾讯IM的功能,由于业务的需要主要使用到了: 1.loginInfo 用户登录,用户信息 2.getRecentContactList 获得最近联系人 3.getLastGrou ...

  7. MSSQL-字符串分离与列记录合并成一行混合使用

    一般我们在数据库的表字段存储字典Id,如果有多个的话一般是用,或分隔符分隔(12,14),列表显示的时候是显示字典名,那如果要在数据库将字典Id转成用户看得懂的字典名,该怎么办呢? 我们这时候可以结合 ...

  8. 51nod 1004 n^n的末位数字【快速幂】

    1004 n^n的末位数字 题目来源: Author Ignatius.L (Hdu 1061) 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 给出 ...

  9. MySql笔记之修改MySQL提示符

    首先,了解下MYSQL提示符是神马东东 就是每次登陆mysql后出现的提示符 如果我们不喜欢这个提示符呢,那我们就改成我们喜欢的样子. 系统参数提示符 举个栗子 就改成相应的提示符了,那么可否随意改名 ...

  10. 牛客小白月赛6 指纹锁（set容器的骚操作）

    原题地址: 题目描述     HA实验有一套非常严密的安全保障体系,在HA实验基地的大门,有一个指纹锁.     该指纹锁的加密算法会把一个指纹转化为一个不超过1e7的数字,两个指纹数值之差越小,就说 ...