diogo谈框,仿prompt()方法布局
展示效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>diogo</title>
<style>
*{margin: 0;padding: 0;}
.costPwd{ width: 450px;height: 200px;border-radius: 10px; border: 1px solid #3385FF;position: fixed;top:50%;left:50%;margin-left: -225px; margin-top: -100px; background: #fff; z-index: 2;}
.costPwd span{position: absolute;top:0;right: 0; width: 30px;height: 30px; display: block; text-align: center; font-size: 20px; font-weight: bold;cursor:pointer; color: red;}
.writePwd{margin-left: 80px; padding-right: 20px; }
.costPwd input{ width: 200px; }
.writePwd,.costPwd input{height: 30px; line-height: 30px; margin-top: 50px;}
.costPwd a{ display: inline-block; width: 70px;height: 30px; background: #3385FF; border-radius: 10px;position: absolute; top: 120px; margin-left: 100px; text-align: center; line-height: 30px; color: #fff; text-decoration: none;}
.tureBtn{left:10px;}
.falseBtn{ left: 150px;}
.bodyShowbg{ width: 100%;height:100%; background: #ccc;position: fixed;top: 0;left: 0;z-index: 1;opacity: 0.9;}
</style>
</head>
<body>
<div class="costPwd">
<span>x</span>
<lable class="writePwd">输入密码:</lable><input type="text">
<div>
<a href="" class="tureBtn">确定</a>
<a href="" class="falseBtn">取消</a>
</div>
</div>
<div class="bodyShowbg"></div>
</body>
</html>
diogo谈框,仿prompt()方法布局的更多相关文章
- element弹框的的this.$alert、this.$prompt方法用法
调用$alert方法即可打开消息提示,它模拟了系统的 alert,无法通过按下 ESC 或点击框外关闭 调用$prompt方法即可打开消息提示,它模拟了系统的 prompt
- HTML DOM prompt() 方法
1. 定义和用法 prompt() 方法用于显示可提示用户进行输入的对话框. 语法 prompt(text,defaultText) 参数 描述 text 可选.要在对话框中显示的纯文本(而不是 HT ...
- prompt() 方法
定义和用法 prompt() 方法用于显示可提示用户进行输入的对话框. 语法 prompt(text,defaultText) 参数 描述 text 可选.要在对话框中显示的纯文本(而不是 HTML ...
- 浅谈 js 字符串 trim 方法之正则篇
原文:浅谈 js 字符串 trim 方法之正则篇 关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格 等 ...
- 浅谈 js 字符串 search 方法
原文:浅谈 js 字符串 search 方法 这是一个很久以前的事情了,好像是安心兄弟在学习js的时候做的练习.具体记不清了,今天就来简单分析下 search 究竟是什么用的. 从字面意思理解,一个是 ...
- prompt 方法显示输入对话框
prompt 方法显示输入对话框 原理: prompt() 方法用于与用户交互,提示用户输入信息的对话框. prompt(str1,str2);此方法包含两个属性: str1:用于提示用户输入的信息. ...
- ppt图片在word中不能正常显示,只显示为矩形框的解决方法
word中插入的其他图片是好的,但是从ppt复制粘贴过来的图片只显示个框. 解决方法:以下红框中内容去选中.
- jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
- easyui datagrid里的复选框置灰方法
easyui datagrid里的复选框置灰方法: $('.datagrid input').prop('disabled',true);//复选框置灰
随机推荐
- 在线HTML文档编辑器使用入门之图片上传与图片管理的实现
在线HTML文档编辑器使用入门之图片上传与图片管理的实现: 官方网址: http://kindeditor.net/demo.php 开发步骤: 1.开发中只需要导入选中的文件(通常在 webapp ...
- 互联网轻量级框架SSM-查缺补漏第三天
简言:平安夜,继续慵懒的学习.我真的是不喜欢学习··· 第三章认识MyBatis核心组件 3.1 持久层的概念和MyBatis的特点 持久层:可以将业务数据存储带磁盘,具有长期存储的能力.一般执行持久 ...
- JavaScript之parseInt()数值转换常被忽略的问题
使用parseInt()你可以从字符串中获取数值,该方法接受另一个基数参数,这经常省略,但不应该.当字符串以”0″开头的时候就有可能会出问题,例如,部分时间进入表单域,在ECMAScript 3中,开 ...
- 四 Scatter/Gather
scatter/gather用于描述从Channel中读取或者写入到Channel的操作. 分散(scatter):从Channel中读取在读操作中将读取的数据写入多个Buffer中.因此,Chann ...
- jqGrid用法汇总(全经典)
1.支持多种类型的数据集合作为数据源 $("#grid1").jqgrid( ........ datatype: "xml", ........ ); XML ...
- 重构指南 - 封装条件(Encapsulate Conditional)
封装就是将相关的方法或者属性抽象成为一个对象. 封装的意义: 对外隐藏内部实现,接口不变,内部实现自由修改. 只返回需要的数据和方法. 提供一种方式防止数据被修改. 更好的代码复用. 当代码中包含 ...
- php编程--二叉树遍历算法实现
今天使用php来实现二叉树的遍历 创建的二叉树如下图所示 php代码如下所示: <?php class Node { public $value; public $child_l ...
- <Android 应用 之路> MPAndroidChart~LineChart
简介 MPAndroidChart是PhilJay大神给Android开发者带来的福利.MPAndroidChart是一个功能强大并且使用灵活的图表开源库,支持Android和IOS两种,这里我们暂时 ...
- makefile 模板 (template)
本文把makefile 分成了三份:生成可执行文件的makefile,生成静态链接库的makefile,生成动态链接库的makefile. 这些makefile都很简单,一般都是一看就会用,用法也很容 ...
- 完整SQL分页存储过程(支持多表联接)
http://www.cnblogs.com/andiki/archive/2009/03/24/1420289.html Code/********************************* ...