弹出框、遮罩层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" οnclick="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="0">确定</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: 12;
border: 1px solid #aaa;
box-shadow: 0 0 8px rgba(0,0,0,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 0 0;
border-bottom: 1px solid #ccc;
}.dialog_inner {
border-radius: 0 0 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 0;
}.dialog_content {
background-color: #fff;
}.icon_info_b {
width: 32px;
height: 32px;
background: url(../images/prompt.png) no-repeat -96px 0;
}.cnfx_content {
padding: 23px 30px 30px 37px;
text-align: left;
}.cnfx_status {
float: left;
padding: 9px 0 0 10px;
}.btn_gray {
margin: 0 0 1px 3px;
}.btn_gray {
border: 1px solid #888;
color: #000000;
color: #000000!important;
background: #F3F3F3;
background: -moz-linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%);
background: -webkit-linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%);
background: -o-linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%);
background: -ms-linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#d7d7d7',GradientType=0 );
background: linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%);
}.btn_gray {
display: inline-block;
height: 22px;
min-width: 24px;
line-height: 22px;
line-height: 23px\9\0;
font-family: Simsun\9;
_overflow-y: hidden;
padding: 0 12px;
margin: 0;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: default;
-moz-user-select: none;
-webkit-user-select: none;
border-radius: 3px;
border-radius: 0\9\0;
}.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=50);
background: #fff;
width:100%;
height:100%;
position: absolute;
z-index:999;
display:block;
}

主要是一些布局，以及绝对定位。其中shade用于遮罩用。

转载于:https://www.cnblogs.com/jiqing9006/p/3476698.html

弹出框、遮罩层demo相关推荐

vue弹出框遮罩层_1、VUE - 遮罩弹框公共组件
一.需求描述有些项目会频繁用到下图这种类型的遮罩弹框,最好的方法是封装为公共的组件,直接复用. image.png image.png 二.方法: 1.子组件:遮罩弹框通过父组件传参,来显示组件内容 ...
jQuery点击图片弹出大图遮罩层
使用jQuery插件HoverTreeShow弹出遮罩层显示大图效果体验: http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目 ...
layer 弹出框(iframe层)父子页面传值
父页面获取子页面元素 $("#iframeID").contents().find("#eleID") $("#iframeID").con ...
axure侧弹层遮罩_Axure教程带遮罩层的弹出框（9）
1. 点击按钮弹出带遮罩层的对线. 页面上下左右滚动时,弹出的对话框水平和垂直始终居中. 2. 双击其中一个动态面板设置标签为"遮罩层"(看个人喜好随便命名),并双击状态1 ...
element-ui框架的el-dialog弹出框被遮罩层挡住了
如图: 解决办法在el-dialog标签里添加 :modal-append-to-body='false' 实现效果: 问题解析先来看看element-ui官网提供的属性说明文档文档解释:翻译成 ...
dialog 弹出框，遮罩层覆盖内容
写完项目没太注意,并且情况是偶尔发生,点击dialog 的弹出框的时候,灰色遮罩层会覆盖内容上面, 这样的话可能是由于我们会发现浏览器遮罩层高于盒子遮罩层,会照成这样的问题,也有可能是我们给父元素加了 ...
用jQuery实现页面遮罩弹出框
页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: <div id="main"> ...
layui table 弹出层刷新_layui 关闭open弹出框刷新table表格页面的方法
layui 关闭open弹出框刷新table表格页面的方法如下所示: 保存后刷新table表格源码 //弹出框 layer.open({ type: 2, shadeClose: true, s ...
【CSS实现Loading遮罩】点击按钮，弹出一个DIV层窗口
加载中 gif 图片: 页面效果: 源码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
手写弹出框，设置遮罩，布局设计。
传统的设计弹出框和遮罩 <template> <div> <div class="这里是内容"> <div class="这里是 ...

弹出框、遮罩层demo

弹出框、遮罩层demo相关推荐

最新文章

热门文章