<!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. webpack最佳入门实践系列(5)

    9.路径相关 原来我们打包的东西都存放到了dist目录下,并没有进行分类存储,乱成一团,这一节我们就要处理一下打包的路径,让打包后的目录看起来更加优雅 9.1.代码准备 我们先建立起这样一个目录结构 ...

  2. MFC CString GetBuffer/ReleaseBuffer 的使用条件

      今天为了通过串口往单片机里写一个16进制字符去控制单片机的adc的起停,结果糊涂到把'\x01'误写成'\0x01',怎么也得不到意想的结果,程序员有时候会犯低级错误,有时候怎么也跳不出去,这时候 ...

  3. linux内核分析之缺页中断【转】

    转自:http://blog.csdn.net/bullbat/article/details/7108402 linux缺页异常程序必须能够区分由编程引起的异常以及由引用属于进程地址空间但还尚未分配 ...

  4. 150.Evaluate Reverse Polish Notation---逆波兰式求值

    题目链接 题目大意:计算逆波兰表达式的值. 法一:stack,用stack存数,遇到操作符,则运算.代码如下(耗时12ms): public int evalRPN(String[] tokens) ...

  5. ajax上传图片到数据库中（不会即时显示）

    一共三个页面 数据表结构 数据表内容 第一个页面 nicheng.html <!DOCTYPE html> <html> <head> <meta chars ...

  6. [BZOJ1072][SCOI2007]排列perm 状压dp

    1072: [SCOI2007]排列perm Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2488  Solved: 1546[Submit][St ...

  7. Java IO 学习（五）跟踪三个文件IO方法的调用链

    假设我们想要用Java读取一个二进制文件,有好几种方式,本文会选取其中比较典型的三种方式进行详细分析 0. 准备工作 安装openjdk-1.8.0.141(普通的jdk中涉及IO的很多代码是闭源的, ...

  8. cl编译C文件的环境变量修改

    添 加环境 变量INCLUDEC:\Program Files (x86)\Windows Kits\10\Include\10.0.10240.0\ucrt;C:\Program Files (x8 ...

  9. Python的程序结构[2] -> 类/Class[3] -> 内建类与内建函数

    内建类与内建函数的区分 / Distinction of Built-in Type and Function 对于 Python,有许多可以不需要定义或引用就可以使用的函数(类)(参考内建模块),诸 ...

  10. System.getProperty("os.name")

    Here is a handy Java class that useSystem.getProperty("os.name") to detect which type of o ...