展示效果：

　　

<!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. Spring Cloud个组件原理

    引言 面试中面试官喜欢问组件的实现原理,尤其是常用技术,我们平时使用了SpringCloud还需要了解它的实现原理,这样不仅起到举一反三的作用,还能帮助轻松应对各种问题及有针对的进行扩展.以下是 课程 ...

  2. form表单在发送到服务器时候编码方式

    enctype(编码方式):规定了form表单在发送到服务器时候编码方式.有如下的三个值可选: 1.application/x-www-form-urlencoded.默认的编码方式.但是在用文本的传 ...

  3. flask之flask-login登陆验证（一）

    这个模块能帮助我们做很多事,最常用到的是,登陆验证(验证当前用户是否已经登陆).记住我功能 一 安装 pip install flask-login 二 导入相关模块及对象并初始化 from flas ...

  4. 使用js获取URL地址栏里面的参数， 获取请求链接参数，函数定义如下

    function getUrlRequestParam(name) { var paramUrl = window.location.search.substr(1); var paramStrs = ...

  5. unity3d之控制人物转向移动并播放动画

    tip:transition 勾选Has Exit Time B动画播放完毕后就可以自己返回A不用代码控制.因为想做一个小人静止时 隔两秒会摆动小手的特效. 附上代码参考: using UnityEn ...

  6. RabbitMQ基础--总结

    一. RabbitMQ的五种工作场景: 1. 单发单收 2. 单发送多接收 +++++++++++++++++++++前面两种没有使用exchange++++++++++++++++++ 3. Pub ...

  7. JavaScript里面的居民们2-字符串

    基于HTML,实现需求 按照HTML中按钮的描述以此实现功能 计算结果显示在 id 为 result 的 P 标签中 <!DOCTYPE html> <html> <he ...

  8. 项目经验:GIS<MapWinGIS>建模第七天

    终天完成了管网地图的附加功能．．实现了了管网与地图结合

  9. hdu 1159 Common Subsequence（最长公共子序列）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1159 Common Subsequence Time Limit: 2000/1000 MS (Jav ...

  10. Log4Net使用教程

    简介 为方便跟踪程序运行情况,我们可以记录系统运行异常日志,winform和web都可以通过继承异常或者try来实现. 官方网站:http://logging.apache.org/log4net/ ...