仿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="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- 440px; _ 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; 18px; height: 18px; border-radius: 2px; } .dialog_icon { float: left; margin: 7px 12px 8px 0; } .dialog_content { background-color: #fff; } .icon_info_b { 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- 24px; line-height: 22px; line-height: 23px90; font-family: Simsun9; _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: 090; } .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; 100%; height:100%; position: absolute; z-index:999; display:block; }
主要是一些布局，以及绝对定位。其中shade用于遮罩用。
