<!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. 总结各种width，height，top，left

    1.offsetWidth 内容+内边距(padding)+边框(border) 2.offsetHeight 内容+内边距(padding)+边框(border) 3.offsetLeft 获取对象 ...

  2. 解决jquery与zepto等其它库冲突兼容的问题

    解决jquery与zepto等其它库冲突兼容的问题;(function ($) {    }) (jQuery); ;(function ($) {    }) (Zepto); 在Bootstrap ...

  3. 洛谷T8115 毁灭

    题目描述 YJC决定对入侵C国的W国军队发动毁灭性打击.将C国看成一个平面直角坐标系,W国一共有n^2个人进入了C国境内,在每一个(x,y)(1≤x,y≤n)上都有恰好一个W国人.YJC决定使用m颗核 ...

  4. android studio 无法调试debug,(能运行安装)

    请检查清单文件的改为true就可以调试了 android:debuggable="true"

  5. 图文详解前端CSS中的Grid布局，你真的可以5分钟掌握

    前言 网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式. 今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式. CSS 第一个Grid布局 首先我们看看 ...

  6. (9)oracle 表的基本查询

    转到进阶查询 查看表的结构 desc  表名; desc student; 查看整张表的数据 select * from 表名; //查整张表很耗时间 select* from student; 查看 ...

  7. Python的程序结构[1] -> 方法/Method[4] -> 魔术方法 __call__ / __str__ / __repr__

    __call__ 方法 __call__ 是当对象被调用时会调用的方法,允许一个对象(类的实例等)像函数一样被调用,也可以传入参数. 1 class Foo(): 2 def __init__(sel ...

  8. nodejs微服务

    近来公司增加了nodejs微服务 它的主要任务是接收来自于现场的采集数据:作业记录和流转记录,动态构建一个基地的全景实时数据        暂时不涉及数据库. 如果要进行数据库操作,不建议使用本模块, ...

  9. postgres基础知识

    postgres是连接到具体的库:   ./psql -U postgres  不指定库,默认就是用户名的同名库   ./psql -d chat -U postgres  指定chat库   pos ...

  10. 理解css的BFC

    BFC是CSS中一个看不见的盒子,(先理解CSS的盒子模型).它的页面渲染方式与普通流的盒子模型不同,它决定了其子元素将如何定位(所用属于BFC的box 都默认左对齐),以及和其他元素的关系和相互作用 ...