弹出框、遮罩层demo
仿alert、confirm的弹出框。
弹出后,用遮罩层将背景虚化。
代码如下:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script src="./js/jquery-1.4.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/pop-up.css">
<script type="text/javascript">
$(document).ready(function(){
$("#pop_up").click(function(){
showDialog();
}); $("#QMconfirm_QMDialog__closebtn_").click(function(event) {
hideDialog();
}); $("#QMconfirm_QMDialog_confirm").click(function(){
hideDialog();
alert("确定");
}); $("#QMconfirm_QMDialog_cancel").click(function(){
hideDialog();
alert("取消");
});
});
function showDialog(){
$("#QMconfirm_QMDialog").show();
$("#shade").attr("class","shade");
} function hideDialog(){
$("#QMconfirm_QMDialog").hide();
$("#shade").attr("class","");
}
</script>
</head>
<body >
<div id="shade" class=""></div>
<a class="btn_gray btn_space" hidefocus="" id="pop_up" onclick="getTop();" href="javascript:;">提示消息</a>
<input type="text" name="test" >
<div id="QMconfirm_QMDialog" class="qm_dialog " style="z-index: 1120; position: absolute; left: 739px; top: 376.5px;display:none;">
<div style="cursor:move;" class="dialog_head" id="QMconfirm_QMDialog__head_">
<span id="QMconfirm_QMDialog__title_">删除确认</span>
<a title="关闭" dlg="close" class="ico_close_d" href="javascript:;" id="QMconfirm_QMDialog__closebtn_" initlized="true">
</a>
</div>
<div id="QMconfirm_QMDialog__content_">
<div class="dialog_inner">
<div class="dialog_content" id="QMconfirm_QMDialog__body_">
<div class=""><div class="cnfx_content">
<span class="dialog_icon icon_info_b"></span>
<div class="dialog_f_c"><div>彻底删除后邮件将无法恢复,您确定要删除吗?</div><div>
</div>
</div>
</div>
<div class="cnfx_status" style="display:none;">
<input id="QMconfirm_QMDialog_recordstatus" class="cnfx_status_checkbox" type="checkbox">
<label for="QMconfirm_QMDialog_recordstatus"></label>
</div>
</div>
</div>
<div class="dialog_operate" id="QMconfirm_QMDialog__foot_">
<div class=" txt_right cnfx_btn">
<a class="btn_gray confirm wd2 " id="QMconfirm_QMDialog_confirm" href="javascript:;" initlized="true" md="">确定</a>
<a class="btn_gray cancel wd2 " id="QMconfirm_QMDialog_cancel" style="display:;" href="javascript:;">取消</a>
<a class="btn_gray wd2" id="QMconfirm_QMDialog_never" style="display:none;" href="javascript:;"></a>
</div>
<div class="clr"></div>
</div>
</div>
</div>
</div> </body>
</html>
css如下:
/* 弹出框 */
select, body, textarea {
font-size: 12px;
} .qm_dialog {
position: absolute;
overflow: hidden;
z-index: ;
border: 1px solid #aaa;
box-shadow: 8px rgba(,,,0.2);
border-radius: 5px;
min-width: 440px;
_width: 440px;
background-color: #eaeaea;
} .dialog_head {
background-color: #eaeaea;
padding: 5px 15px;
line-height: 25px;
font-weight: bold;
border-radius: 5px 5px ;
border-bottom: 1px solid #ccc;
} .dialog_inner {
border-radius: 5px 5px;
overflow: hidden;
} .ico_close_d:hover {
background-position: -54px -240px;
} .ico_close_d, .qm_dialog .ico_minimize {
position: absolute;
right: 10px;
top: 9px;
background: url(../images/mail.png) no-repeat -18px -240px;
width: 18px;
height: 18px;
border-radius: 2px;
} .dialog_icon {
float: left;
margin: 7px 12px 8px ;
} .dialog_content {
background-color: #fff;
} .icon_info_b {
width: 32px;
height: 32px;
background: url(../images/prompt.png) no-repeat -96px ;
} .cnfx_content {
padding: 23px 30px 30px 37px;
text-align: left;
} .cnfx_status {
float: left;
padding: 9px 10px;
} .btn_gray {
margin: 1px 3px;
} .btn_gray {
border: 1px solid #;
color: #;
color: #!important;
background: #F3F3F3;
background: -moz-linear-gradient(top,#ffffff %,#ebebeb %,#F3F3F3 %);
background: -webkit-linear-gradient(top,#ffffff %,#ebebeb %,#F3F3F3 %);
background: -o-linear-gradient(top,#ffffff %,#ebebeb %,#F3F3F3 %);
background: -ms-linear-gradient(top,#ffffff %,#ebebeb %,#F3F3F3 %);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#d7d7d7',GradientType= );
background: linear-gradient(top,#ffffff %,#ebebeb %,#F3F3F3 %);
} .btn_gray {
display: inline-block;
height: 22px;
min-width: 24px;
line-height: 22px;
line-height: 23px\\;
font-family: Simsun\;
_overflow-y: hidden;
padding: 12px;
margin: ;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: default;
-moz-user-select: none;
-webkit-user-select: none;
border-radius: 3px;
border-radius: \\;
} .cnfx_btn {
text-align: right;
}
.txt_right {
text-align: right;
} .dialog_operate {
background-color: #eaeaea;
padding: 5px 12px;
text-align: right;
line-height: 25px;
border-top: 1px solid #ccc;
} .dialog_f_c {
margin-left: 44px;
padding-top: 8px;
line-height: 1.9;
font-size: 14px;
} .shade{
opacity: 0.5;
filter: alpha(opacity=);
background: #fff;
width:%;
height:%;
position: absolute;
z-index:;
display:block;
}
主要是一些布局,以及绝对定位。其中shade用于遮罩用。
弹出框、遮罩层demo的更多相关文章
- html+css源码之实现登录弹出框遮罩层效果
在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...
- jquery弹出关闭遮罩层实例
jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...
- ifream页面弹出框遮盖层覆盖父页面
1.首先找到子页面上遮罩层的id, 2.然后再父页面编写个js方法 function shade() { $(".layui-layer-shade").height($(wind ...
- jQuery点击图片弹出大图遮罩层
使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产 ...
- js实现弹出窗口+遮罩层+tab切换
[功能1]点击约谈按钮,弹出对话框和遮罩层(自己的叫法 专业叫法没有查) [部分重点代码] [下面的方法] (1)获取系统时间如何实现(2)点击如何实现弹出窗口和遮罩层 $(".date_n ...
- 根据juery CSS点击一个标签弹出一个遮罩层的简单示例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jQuery弹出关闭遮罩层
效果体验:http://keleyi.com/keleyi/phtml/jquery/9.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- Axure Base 09 带遮罩层的弹出框
示例原型下载:小楼Axure原创元件-带遮罩层的弹出框 实现目标: 1. 点击按钮弹出带遮罩层的对话框: 2. 页面上下左右滚动时,弹出的对话框水平和垂直始终居中. 实现步骤如下: 1. 拖入 ...
- 关于Layer弹出框初探
layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...
随机推荐
- ORA-14400: inserted partition key does not map to any partition
ORA-14400: inserted partition key does not map to any partition 数据库表已经分区,如果插入数据时出现错误提示: ORA-14400: 插 ...
- Live555类结构
Medium live555几乎所有的处理单元都继承自Medium类:该类抽象了基本的接口,包括环境,task和媒体名和媒体查找函数(lookupByName)以及一些辅助函数.也包括返回当前的环境类 ...
- UVA 100 - The 3n+1 problem (3n+1 问题)
100 - The 3n+1 problem (3n+1 问题) /* * 100 - The 3n+1 problem (3n+1 问题) * 作者 仪冰 * QQ 974817955 * * [问 ...
- java开发中遇到的问题及解决方法(持续更新)
摘自 http://blog.csdn.net/pony12/article/details/38456261 java开发中遇到的问题及解决方法(持续更新) 工作中,以C/C++开发为主,难免与其他 ...
- 第一个MyBatis程序
最近研究了一些MyBatis技术,虽然工作中还未用到,但是觉得了解一下也是不错的.这里记录了第一个简单的Demo程序,防止自己忘记. 第一步需要配置Mybatis-config.xml文件.注意:这里 ...
- ibatis错误汇总
1) 错误:The prefix "context" for element "context:property-placeholder" is not bou ...
- HTML高级标签(2)————窗体分帧(2)————后台管理页面
使用frameset进行窗体分帧.构建简易的后台页面.这篇博客就作为一个简易后台管理页面的实战演练. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3px ...
- 实现怎样支持Android重力感应器Sensor编程
添加当重力变化时的处理函数 在创建监听器时调用的函数 doSomething(x, y, z) 是自己定义的方法. 当手机倾斜方向改变时,监听器会调用该方法. 我们要做的,就是填充该方法,用于在重力发 ...
- ADO.net基础学习总结
ADO.net是一门.net连接.操作数据库的技术 释放资源:凡是实现了idisposable借口的类都需要用using来释放资源 using() { } 连接数据库 //创建数据库连接: usi ...
- 为net-snmp添加读readTimeTicks
function readTimeTicks(time){ if(time === 0) return ''; var d = 0, h = 0, m = 0, s = 0; d = parseInt ...