<!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. win8启用.net framework3.5方法

    管理员命令下执行dism.exe /online /enable-feature /featurename:NetFX3 /Source:L:\sources\sxs

  2. 莫队 [洛谷2709] 小B的询问[洛谷1903]【模板】分块/带修改莫队（数颜色）

    莫队--------一个优雅的暴力 莫队是一个可以在O(n√n)内求出绝大部分无修改的离线的区间问题的答案(只要问题满足转移是O(1)的)即你已知区间[l,r]的解,能在O(1)的时间内求出[l-1, ...

  3. rabbitmq web管理页面无法访问

    安装rabbitmq 之后可以通过默认的15672端口访问web界面进行管理,rabbitmq一些默认端口如下: 4369: epmd, a peer discovery service used b ...

  4. 终于遇到了传说的ie 6 img 3px的bug

    最近在做一个网站,基本上已经算完成,就开始完善细节部分了. IE6可能是微软最为YD 的一款浏览器了吧,至今还没有退出历史的舞台,尽管google都宣布不在支持它了. 因为该死的ie6,虽死但是牢牢地 ...

  5. UVA 11925:Generating Permutations(冒泡排序 Grade D)

    VJ题目链接 题意:n个数(n<300),是一个1~n的某个排列.有两种操作:操作1把前两个数换位置,操作2把第一个数移动到最后.问给出一个排列,问通过怎样的操作,能把1,2,3,...,n变到 ...

  6. poj 1873（枚举所有的状态+凸包）

    The Fortified Forest Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 6115   Accepted: 1 ...

  7. C#模拟进行压力测试

    using System; using System.Diagnostics; using System.IO; using System.Net; using System.Text; using ...

  8. 使用keytool生成ssl证书

    使用keytool生成ssl证书 在项目中由于要使用https访问项目,然后了解到jdk有一个自带的工具keytool可以用来生成ssl证书,从而可以通过https进行访问. 使用keytool生成s ...

  9. api访问参数

    一.Get请求 1.一个参数时 2. 二.Post请求

  10. 第十四届华中科技大学程序设计竞赛 J Various Tree【数值型一维BFS/最小步数】

    链接:https://www.nowcoder.com/acm/contest/106/J 来源:牛客网 题目描述 It's universally acknowledged that there'r ...