展示效果：

　　

<!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 安装php扩展swoole redis

    本文讲的是已经有redis.so 和swoole.so文件的情况 我的环境是xampp php的扩展目录为 /opt/lampp/lib/php/extensions/no-debug-non-zts ...

  2. Django 中间件实现用户认证与IP频率限制

    1.URL访问过滤 通过装饰器进行用户认证非常方便,但是在添加部分需要认证的功能时,就需要再次添加装饰器,如果通过中间件来实现,就不需要再进行添加的操作. import re LOGIN_URL = ...

  3. [ERROR] Failed to execute goal org.apache.maven.plugins:maven-dependency-plugin:2.8:unpack (unpack) on project sq-integral-web: Unable to find artifact.

    1.问题描述 项目maven打包报上述错误, 但是小伙伴运行好使. 2.问题解决 是idea工程编码(gbk)和项目编码(utf-8)不一致 idea->file->Other Setti ...

  4. sass判断语句

    @if判断 @if可一个条件单独使用,也可以和@else结合多条件使用 scss.style css.style 三目判断 语法为:if($condition, $if_true, $if_false ...

  5. flex与相对定位在国内双核浏览器极速模式下的兼容性问题

    在国内的浏览器中,360浏览器,QQ浏览器等绝大部分都是双核浏览器.双核浏览器即拥有IE兼容内核和非IE极速内核两个内核,分别对应兼容模式和极速模式.兼容模式时使用IE内核,极速模式采用webkit内 ...

  6. 19_ThreadLocal

    [概述] 线程局部变量,是一种多线程间并发访问变量的解决方案.与synchronized等加锁的方式不同,ThreadLocal完全不提供锁,而使用以空间换时间的手段,为每个线程提供变量的独立副本,以 ...

  7. vue2.0中的watch和计算属性computed

    watch和computed均可以监控程序员想要监控的对象,当这些对象发生改变之后,可以触发回调函数做一些逻辑处理 watch监控自身属性变化 <!DOCTYPE html> <ht ...

  8. 64位Navicat Premium-11.2.7(64bit)访问64位Oracle服务器

    1 在windows 10 64位操作系统安装Navicat Premium-11.2.7(64bit). 2 在服务器安装64位的Oracle(win64_11gR2_database). 3 在h ...

  9. c# 读取txt文件并分隔

    public static List<PostPerson> GetNameByFile() { #region 读取txt文件 var file = File.Open(Environm ...

  10. Windows下sc create命令行添加/创建/修改服务

    添加服务: sc create TestService binpath= "D:\TestApp\TestService.exe" 注意:所有的等号和值之间需要一个空格(等号前不要 ...