<!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. IEjs 调试、火狐 js 调试

    http://www.jb51.net/article/26707.htm IE下调试代码, 在代码中写 debugger; 然后IE启用调试, 会执行到debugger 断点出, 双击变量 右键 添 ...

  2. HDU1556---树状数组 | 线段树 |*

    输入n,紧接n行,每行a,b n个气球,a,b表示从第a到第b个气球涂一次色,输出每个球最终的涂几次色 暴力超时,优化数据结构 1.树状数组 #include<iostream> #inc ...

  3. [bzoj 2216] [Poi2011] Lightning Conductor

    [bzoj 2216] [Poi2011] Lightning Conductor Description 已知一个长度为n的序列a1,a2,-,an. 对于每个1<=i<=n,找到最小的 ...

  4. struts2 json 输出日期格式不正确

    struts2 输出json中 日期出现:2013-12-17T15:57:47 错误格式的数据 原因:struts2 json插件对日期的格式化有问题 解决方法:在实体类的日期的get方法上加注解: ...

  5. median(NOIP模拟赛Round 3)

    也是神奇的题目.. 原题传送门 首先看到这道题目,很明显我们需要线性算法 1.前缀和+统计 2.DP+统计 对于第一种算法,我们可以对于任何一个a[i]对b进行比较,如果大于b标上1,等于b标上0,小 ...

  6. 三、第一个cocos2d程序的代码分析

    http://blog.csdn.net/q199109106q/article/details/8591706 在第一讲中已经新建了第一个cocos2d程序,运行效果如下: 在这讲中我们来分析下里面 ...

  7. 【原创】Linux环境下的图形系统和AMD R600显卡编程(6)——AMD显卡GPU命令格式

    前面一篇blog里面描述了命令环缓冲区机制,在命令环机制下,驱动写入PM4(不知道为何会取这样一个名字)包格式的命令对显卡进行配置.这一篇blog将详细介绍命令包的格式. 当前定义了4中命令包,分别是 ...

  8. unicode ascii 互转 函数 C实现 MultiByteToWideChar/WideCharToMultiByte 详解

    void Ascii2UnicodeLen(char*src,int len,unsigned short*tar) { unsigned int word_cnt; word_cnt=MultiBy ...

  9. python 拼图验证码

    基于python2.7 django 1.10 用谷歌浏览器验证测试没问题,写的很烂,纯属学习 项目地址 https://github.com/cainiaoit/-Jigsaw-verifying- ...

  10. 4.DataFrame(快速开始)

    快速开始 基本概念 ''' 在使用 DataFrame 时,需要了解三个对象上的操作:Collection(DataFrame) ,Sequence,Scalar Collection(DataFra ...