展示效果：

　　

<!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()方法布局的更多相关文章

  1. element弹框的的this.$alert、this.$prompt方法用法

    调用$alert方法即可打开消息提示,它模拟了系统的 alert,无法通过按下 ESC 或点击框外关闭 调用$prompt方法即可打开消息提示,它模拟了系统的 prompt

  2. HTML DOM prompt() 方法

    1. 定义和用法 prompt() 方法用于显示可提示用户进行输入的对话框. 语法 prompt(text,defaultText) 参数 描述 text 可选.要在对话框中显示的纯文本(而不是 HT ...

  3. prompt() 方法

    定义和用法 prompt() 方法用于显示可提示用户进行输入的对话框. 语法 prompt(text,defaultText) 参数 描述 text 可选.要在对话框中显示的纯文本(而不是 HTML ...

  4. 浅谈 js 字符串 trim 方法之正则篇

    原文:浅谈 js 字符串 trim 方法之正则篇 关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格   等 ...

  5. 浅谈 js 字符串 search 方法

    原文:浅谈 js 字符串 search 方法 这是一个很久以前的事情了,好像是安心兄弟在学习js的时候做的练习.具体记不清了,今天就来简单分析下 search 究竟是什么用的. 从字面意思理解,一个是 ...

  6. prompt 方法显示输入对话框

    prompt 方法显示输入对话框 原理: prompt() 方法用于与用户交互,提示用户输入信息的对话框. prompt(str1,str2);此方法包含两个属性: str1:用于提示用户输入的信息. ...

  7. ppt图片在word中不能正常显示，只显示为矩形框的解决方法

    word中插入的其他图片是好的,但是从ppt复制粘贴过来的图片只显示个框. 解决方法:以下红框中内容去选中.

  8. jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  9. easyui datagrid里的复选框置灰方法

    easyui datagrid里的复选框置灰方法: $('.datagrid input').prop('disabled',true);//复选框置灰

随机推荐

  1. shiro权限控制入门

    一:权限控制两种主要方式 粗粒度 URL 级别权限控制和细粒度方法级别权限控制 1.粗粒度 URL 级别权限控制 可以基于 Filter 实现在数据库中存放 用户.权限.访问 URL 对应关系, 当前 ...

  2. django基础一：web、wsgi、mvc、mtv

    一.web框架 web框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以快速开发特定的系统.他山之石,可以攻玉.python的所有web框架,都是对so ...

  3. 关于Sychronized和volatile自己总结的一点点理解（草稿）

    问答形式列举: 1. 为什么说sychronized能保证可见性 synchronized和Lock能保证同一时刻只有一个线程获取锁然后执行同步代码,并且在释放锁之前会将对变量的修改刷新到主存当中.因 ...

  4. nodejs的get与post

    index.html <html> <body> <form action="/api/v1/records" method="post&q ...

  5. chrome调试工具DevTools的使用 以及 localhost在移动端不能访问的问题

    1.手机和pc 都需要装 chrome浏览器 2.手机端打开开发者模式和usb调试 (华为nova的手机小坑,需要选择usb 配置为可传输文件的状态) 3.经过以上操作打开chrome://inspe ...

  6. C中atoi和strcpy的自定义实现

    这是两道经常考到的笔试题,看似简单的实现,其实专注到细节,还是有很多需要注意扣分的地方. atoi实现: #include <iostream> #include<ctype.h&g ...

  7. Windows下 Mysql启动报1067解决方法

    前几天刚入职安装了一下Mysql  刚开始能打开  今天去公司发现启动不了服务 报1067错误, 在网上查看了一些方法,好多种版本..以下是本人的解决方法 1.打开运行-事件查看器--Windows日 ...

  8. Java—IO流 字符流

    java的文本(char)是16位无符号整数,是字符的unicode编码(双字节编码). 文件是byte byte byte ... 的数据序列. 文本文件是文本(char)序列按照某种编码方案(uf ...

  9. mac phpstrom 环境配置

    因为mac下自带php,但是没有环境(ini文件)所有需要自己重新安装一下: curl -s http://php-osx.liip.ch/install.sh | bash -s 5.5 # 5.5 ...

  10. 路由协议RIP、EIGRP、OSPF

    前提 在网络拓扑中,我们经常多个路由连接不同子网,路由之间要转发不同子网的包,前提是路由之间要知道对方路由的存在. 因此这次我要写的是有关维护路由之间存在的协议,RIP.EIGRP和OSPF,静态路由 ...