展示效果：

　　

<!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. Linux下剪切拷贝命令

    Linux下剪切拷贝命令   命令格式: mv   source    dest   mv: 命令字   source: 源文件   dest: 目的地址   Linux下拷贝命令   命令格式:cp ...

  2. 二、单层感知器和BP神经网络算法

    一.单层感知器 1958年[仅仅60年前]美国心理学家FrankRosenblant剔除一种具有单层计算单元的神经网络,称为Perceptron,即感知器.感知器研究中首次提出了自组织.自学习的思想, ...

  3. ecs CentOS 7 安装 mariadb

    检查之前是否已经安装 rpm -qa | grep mariadb 如果已安装,卸载 yum remove mysql mysql-server mysql-libs compat-mysql51 开 ...

  4. java温故而知新（6）深入理解IO Stream

    一.什么是IO Stream Stream 是在编程语言中对输入输出的总称 (一种比喻的称谓.Stream 为流水,输入输出实际上就是指数据的流动,数据由一个地方运动的另一个地方,就像流水一样,程序员 ...

  5. K2P断流问题

    本帖最后由 yufei8051 于 2019-3-15 15:29 编辑 感谢 “zhc887”的指点,把这3个文件删除后(后面大神说不是删除是清除,我直接删掉貌似也正常,建议听大神的)从这两天的使用 ...

  6. BZOJ4698: Sdoi2008 Sandy的卡片(二分 hash)

    题意 题目链接 Sol 用什么后缀数组啊 直接差分之后 二分+hash找最长公共子串就赢了啊... 时间复杂度:\(O(nlogn)\)(不过我写的是两个log..反正也能过) // luogu-ju ...

  7. html中块级元素和行内元素

    块级元素和行内元素的三个区别 1.行内元素与块级元素直观上的区别: 行内元素会在一条直线上排列,都是同一行,水平方向排列 块级元素独占一行,垂直方向排列.块级元素从新行开始结束接着一个断行 2.块级元 ...

  8. Codeforces Round #413 B. T-shirt buying

    B. T-shirt buying time limit per test   3 seconds memory limit per test   256 megabytes   A new pack ...

  9. win7 64 位安装 python，提示： 0x80240017-未指定的错误

    首先确保从python官网下载正确的python版本: https://www.python.org/downloads/windows/ 然后,应该是 VC 相关的问题. 去微软网站下载下列补丁包即 ...

  10. strace for Android

    使用strace for Android跟踪系统调用过程方便后续的so文件分析 http://benno.id.au/blog/2007/11/18/android-runtime-stracehtt ...