展示效果：

　　

<!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. springboot aop使用介绍

    第一步:添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...

  2. Java Object类的equals()方法

    所有类都从Object类中继承了equals方法,Object类中equals方法源代码如下: public boolean equals(Object obj)     {         retu ...

  3. 第9章 CSS3中的变形与动画（下）

    Keyframes介绍 Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号" ...

  4. struts2 国际化语言转换

    学习struts2,了解了使用struts2的配置文件可以走向国际化,实现页面的语言转换.我已中文和英文为例,简单的实现登录页面的国际化 废话不多说,上代码 一,login.jsp页面 使用s标签&l ...

  5. 001Java锁之synchronized

    01.synchronized & Lock synchronized锁同步 软件层面依赖JVM Lock锁同步 硬件层面依赖cpu指令 02.synchronized作用域 方法:锁住对象实 ...

  6. MongoDB 创建集合

    createCollection() 方法 MongoDB db.createCollection(name, options) 是用来创建集合. 语法: 基本的 createCollection() ...

  7. MySQL数据库(4)----生成统计信息

    MySQL最有用的一项功能就是,能够对大量原始数据进行归纳统计. 1.在一组值里把各个唯一的值找出来,这是一项典型的统计工作,可以使用DISTINCT 关键字清楚查询结果里重复出现的行.例如,下面的查 ...

  8. 【Supervised Learning】支持向量机SVM （to explain Support Vector Machines (SVM) like I am a 5 year old ）

    Support Vector Machines 引言 内核方法是模式分析中非常有用的算法,其中最著名的一个是支持向量机SVM 工程师在于合理使用你所拥有的toolkit 相关代码 sklearn-SV ...

  9. C++ 11: function & bind 使用示例

    #include <functional> #include <iostream> struct Foo { Foo(int num) : num_(num) {} void ...

  10. react-native-splash-screen

    react-native-splash-screen在GitHub上的地址:https://github.com/crazycodeboy/react-native-splash-screen rea ...