仿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的更多相关文章

  1. html+css源码之实现登录弹出框遮罩层效果

    在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...

  2. jquery弹出关闭遮罩层实例

    jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...

  3. ifream页面弹出框遮盖层覆盖父页面

    1.首先找到子页面上遮罩层的id, 2.然后再父页面编写个js方法 function shade() { $(".layui-layer-shade").height($(wind ...

  4. jQuery点击图片弹出大图遮罩层

    使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产 ...

  5. js实现弹出窗口+遮罩层+tab切换

    [功能1]点击约谈按钮,弹出对话框和遮罩层(自己的叫法 专业叫法没有查) [部分重点代码] [下面的方法] (1)获取系统时间如何实现(2)点击如何实现弹出窗口和遮罩层 $(".date_n ...

  6. 根据juery CSS点击一个标签弹出一个遮罩层的简单示例

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. jQuery弹出关闭遮罩层

    效果体验:http://keleyi.com/keleyi/phtml/jquery/9.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  8. Axure Base 09 带遮罩层的弹出框

    示例原型下载:小楼Axure原创元件-带遮罩层的弹出框 实现目标: 1.   点击按钮弹出带遮罩层的对话框: 2.   页面上下左右滚动时,弹出的对话框水平和垂直始终居中. 实现步骤如下: 1. 拖入 ...

  9. 关于Layer弹出框初探

    layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...

随机推荐

  1. SQLServer优化资料整理（二）

    存储过程编写经验和优化措施 一.适合读者对象:数据库开发程序员,数据库的数据量很多,涉及到对SP(存储过程)的优化的项目开发人员,对数据库有浓厚兴趣的人. 二.介绍:在数据库的开发过程中,经常会遇到复 ...

  2. USB系列之一：列出你的USB设备

    USB现在已经成为PC机必不可少的接口之一,几乎所有的设备都可以接在USB设备上,USB键盘.鼠标.打印机.摄像头,还有常用的U盘等等,从本篇文章开始,将集中篇幅介绍一下在DOS中使用USB设备的方法 ...

  3. 分布式文件系统 fastDFS 安装步骤

    安装 fastDFS 很简单. 先安装 libevent, 安装成功后,安装fastDFS. ./make.sh ./make.sh install 我使用一台tracker服务器  192.168. ...

  4. Windows下安装使用curl命令

    1 进入http://curl.haxx.se/download/?C=M;O=D网站 2 根据自己的操作系统位数和是否需要SSL下载相应的版本.这里下载curl-7.33.0-win64-ssl-s ...

  5. UESTC_棋盘游戏 CDOJ 578

    最近昀昀学习到了一种新的棋盘游戏,这是一个在一个N×N的格子棋盘上去搞M个棋子的游戏,游戏的规则有下列几条: 棋盘上有且仅有一个出口 开始时没有哪个棋子在出口,而且所有棋子都不相邻(这里的相邻是指上下 ...

  6. Permutation Sequence 解答

    Question The set [1,2,3,…,n] contains a total of n! unique permutations. By listing and labeling all ...

  7. hdu 3681 Prison Break(状态压缩+bfs)

    Problem Description Rompire . Now it’s time to escape, but Micheal# needs an optimal plan and he con ...

  8. .net项目中上传大图片失败

    .net项目中有时用户提出要上传大图片,一张图片有可能十几兆,本来用的第三方的上传控件,有限制图片上传大小的设置,以前设置的是2M.按照用户的要求,以为直接将限制图片上传大小的设置改下就可以了,但是当 ...

  9. ubuntu 步步为营之uclinux编译和移植（完整版）

    本节主要包含(ubuntu10.04) 一,linux下的经常使用压缩解压缩命令 二,环境建立 三,内核编译 四,移植 一,linux下的经常使用压缩解压缩命令 在linux下常见的压缩文件格式有ta ...

  10. jquery .net 无刷新多文件上传

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示 ...