带有遮罩层的弹出框（新旧版）
新版（2014-08-25）
1，html
在body开始标签后添加：<div class="grey"></div>
在任意位置添加：<div class="pop-upWrap">.....</div>
2，css
.grey{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.50; filter: alpha(opacity=50);}
.pop-upWrap{ position:absolute; top:10px;left:50%;margin-left:-490px;z-index:9999;width:980px;height:636px; color:#262830; display: none;}
注：弹出框.pop-upWrap的宽度是width:980px时，margin-left是它的一半，且是负值，-490px。
3，js
$(function(){ //点击按钮，显示弹出框 $(".statisticBottom-right td a").click(function(){ $(".grey").show(); $(".pop-upWrap").show(); }); //点击（已弹出的对话框）右上角的关闭按钮 $(".pop-upWrap .btn-2 img").click(function(){ $(".grey").hide(); $(".pop-upWrap").hide(); }); //滚动页面时，遮罩层随着页面 $(window).scroll(function(){ var h = $(window).scrollTop(); h += $(window).height(); $(".grey").height(h); }); });
旧版
在jsp文件里的css文件图片放绝对路径写法: background: url(<%=request.getContextPath()%>/images/select_arrow.jpg) no-repeat center right;
一共需要两段html和一段js
html：一段在需要弹出框的页面
一段是弹出框自身页面。
js：弹出框页面内的js文件。
1，需要弹出框的页面
<!-- 灰色遮罩层 --> <style type="text/css"> .grey{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.50; filter: alpha(opacity=50);} </style> <div class="grey"></div> <!-- 用来存放弹出框的div --> <div id="dialogContainer"></div> <script type="text/javascript"> $(function(){ //点击按钮，显示探出框 $(".biaobox a").click(function(){ $(".grey").show(); var url = "<c:url value='/buyInfo/dialogNewCar.jsp' />"; $("#dialogContainer").load(url); }); $(window).scroll(function(){ var h = $(window).scrollTop(); h += $(window).height(); $(".grey").height(h); }); }); </script>
阻止a的href=""默认事件
if ( e && e.preventDefault ) {
e.preventDefault(); //阻止默认浏览器动作(W3C)
}else{
e.returnValue = false; //IE中阻止函数器默认动作的方式 //return false;
}
2，弹出的jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ page import="com.jipin.util.Constants" %> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>置换新车弹出页</title> <script type="text/javascript" src="<c:url value='/js/detailNewCar.js' />"></script> <style type="text/css"> img{border:0;} p,ul,li,button,input{padding:0;margin:0;} .sec-left, .sec-right{display:none;} .dialog{display:block;position:absolute;width:764px;height:778px;font-size:14px;font-family:"微软雅黑";top:194px;left:59%;margin-left:-513px;z-index:9999;} .dialog .close{width:20px;height:20px;position:absolute;top:4px;right:10px;cursor:pointer;} .dialog .dialog-top{height:30px;background-color:#5f6a81;text-align:center;color:#fff;line-height:30px;} .dialog .dialog-content{width:678px; height:713px;padding:32px 42px;border:1px solid #b8b8b8;border-top:none;background-color:#fff;} .dialog .dialog-content .carDetail{height:142px;border-bottom:1px dashed #b8b8b8;} .carDetail img{float:left;margin-right:20px;} .carDetail .carDetail-right{height:104px;float:left;} .carDetail .carDetail-right .carDetail-right-title{color:#404b66;font-size:16px;height:20px;line-height:20px;} .carDetail .carDetail-right .price,.carDetail .carDetail-right .address{color:#868686;font-size:12px;margin-top:20px;} .carDetail .carDetail-right .price span{font-size:18px;color:#e43b2c;} .carDetail .carDetail-right .address span{color:#2f2f2f;} #carInfor{height:554px;margin-top:8px;color:#333; } #carInfor td{margin:0;padding:0;font-size:14px;} #carInfor .carInput{width:394px; height:26px;border:1px solid #959eb0;padding-left: 14px;border-radius:0;} #carInfor #model1,#carInfor #model2{width:180px; height:26px;border:1px solid #959eb0;margin-right:16px;padding-left:14px;background: url(../images/select_arrow.jpg) no-repeat center right;cursor: pointer;border-radius:0;} #carInfor .priceRep{list-style:none;} #carInfor .priceRep li{float:left;padding:2px 8px;margin-right:14px;} #carInfor .priceRep li a:link,#carInfor .priceRep li a:hover{text-decoration:none;} #carInfor .priceRep .active{text-align: center;background: #e17801;} .priceRep .active a:link,.priceRep .active a:hover{color:#fff;} #carInfor .name,#carInfor .phone{width:186px; height:26px;border:1px solid #959eb0;padding-left:10px;border-radius:0;} #carInfor button{width:144px; height:36px; color:#fff; background:#e1780e;font-size:14px;} /*box1*/ .box1{ width:178px; height:200px; border:#53778d solid 1px; padding:5px 8px; font-size:12px; font-family: 宋体; overflow-x:hidden; overflow-y:auto; display:none; position:absolute; z-index:10000; background:#fff;} .box1 ul{width:170px;list-style:none;} .box1 ul li{height:20px;line-height:20px;margin:0;padding:0;} .box1 ul li:hover{background:blue;} /*box2*/ .box2{ width:178px; height:200px; border:#53778d solid 1px; padding:5px 8px; font-size:12px; font-family: 宋体; overflow-x:hidden; overflow-y:auto; display:none; position:absolute; z-index:10000; background:#fff;} .box2 ul{width:170px;list-style:none;} .box2 ul li{height:20px;line-height:20px;margin:0;padding:0;} .box2 ul li:hover{background:blue;} </style> </head> <body> <!--html dialog开始--> <div class="dialog"> <img class="close" src="../images/php/close.png" /> <div class="dialog-top">置换新车</div> <!--dialog-content开始--> <div class="dialog-content"> <div class="carDetail"> <img src="<c:url value='/images/dialog-car.jpg'/>" /> <div class="carDetail-right"> <p class="carDetail-right-title">2013款 奔驰 C260 优雅型 Grand Edition</p> <p class="price">报价： <span>26万</span></p> <p class="address">4S店： <span>海口嘉华兄弟二手车经纪分公司</span></p> </div> </div> <table id="carInfor"> <tr><td align="left" colspan="2">现车信息</td><td></td></tr> <tr><td align="left" width="12%">车辆信息：</td><td><input type="text" class="carInput"/></td></tr> <tr> <td align="left" width="12%">所在地区：</td> <td class="area"> <input type="text" id="model1" placeholder="北京" /> <input type="text" id="model2" placeholder="北京" /> </td> </tr> <tr> <td align="left" width="12%">置换价格：</td> <td> <ul class="priceRep"> <li class="active"><a href="javascript:;">不限</a></li> <li><a href="javascript:;">3万以下</a></li> <li><a href="javascript:;">3-5万</a></li> <li><a href="javascript:;">5-8万</a></li> <li><a href="javascript:;">8-10万</a></li> <li><a href="javascript:;">10-15万</a></li> <li><a href="javascript:;">15-20万</a></li> <li><a href="javascript:;">20-30万</a></li> <li><a href="javascript:;">30-50万</a></li> <li><a href="javascript:;">50-100万</a></li> </ul> </td> </tr> <tr> <td align="left" width="12%">车 龄：</td> <td> <ul class="priceRep"> <li class="active"><a href="javascript:;">不限</a></li> <li><a href="javascript:;">1年以内</a></li> <li><a href="javascript:;">1-3年</a></li> <li><a href="javascript:;">3-5年</a></li> <li><a href="javascript:;">5年以上</a></li> </ul> </td> </tr> <tr> <td align="left" width="12%">里 程：</td> <td> <ul class="priceRep"> <li class="active"><a href="javascript:;">不限</a></li> <li><a href="javascript:;">1万公里以下</a></li> <li><a href="javascript:;">1-3万公里</a></li> <li><a href="javascript:;">3-6万公里</a></li> <li><a href="javascript:;">6-10万公里</a></li> <li><a href="javascript:;">10万公里以上</a></li> </ul> </td> </tr> <tr><td align="right" width="12%">姓名：</td><td><input type="text" class="name"/></td></tr> <tr><td align="right" width="12%">手机：</td><td><input type="text" class="phone"/></td></tr> <tr><td></td><td align="center"><button>提 交</button></td></tr> </table> </div> </div> <!-- box1开始 --> <div class="box1"> <ul> <li>北京</li> <li>上海</li> <li>广州</li> <li>河北</li> <li>河南</li> <li>内蒙</li> <li>山西</li> <li>安徽</li> <li>江西</li> <li>浙江</li> <li>江苏</li> <li>重庆</li> <li>吉林</li> <li>黑龙江</li> <li>辽宁</li> <li>新疆</li> <li>甘肃</li> <li>西藏</li> <li>湖北</li> <li>湖南</li> <li>广西</li> <li>四川</li> <li>贵州</li> <li>广东</li> <li>海南</li> <li>福建</li> <li>山东</li> </ul> </div> <!--box2开始--> <div class="box2"> <ul> <li>北京</li> <li>上海</li> <li>广州</li> <li>河北</li> <li>河南</li> <li>内蒙</li> <li>山西</li> <li>安徽</li> <li>江西</li> <li>浙江</li> <li>江苏</li> <li>重庆</li> <li>吉林</li> <li>黑龙江</li> <li>辽宁</li> <li>新疆</li> <li>甘肃</li> <li>西藏</li> <li>湖北</li> <li>湖南</li> <li>广西</li> <li>四川</li> <li>贵州</li> <li>广东</li> <li>海南</li> <li>福建</li> <li>山东</li> </ul> </div> <input type="hidden" id="colIndex" value="3"/> </body> </html>
3，弹出jsp页面的js
// JavaScript Document $(function(){ //点击筛选条件，加橙色选中背景 $(".priceRep li").click(function(){ $(this).siblings().removeClass("active").find("a").css({'color':'#333'}); $(this).addClass("active").find("a").css({'color':'#fff'}); }); //备选品牌DIV区域 var box1 = $(".box1"); var box2 = $(".box2"); //当前点击的目标输入框 var current_target = ""; //点击选择框时，清除其他框 function clickBlank(num){ for(var i = 0; i < 4; i++){ if( i != num){ $(".box"+i).hide(); } } } //点击空白区域，备选品牌DIV区域消失 $(document).click(function (event) { if(box1.is(":visible")){ box1.hide(); } if(box2.is(":visible")){ box2.hide(); } }); //车辆品牌-点击快速找车的输入框 $("input#model1").click(function(event){ clickBlank(1); current_target = event.target; box1.css({top:($(this).offset().top+30),left:($(this).offset().left)}); if(box1.is(":visible")){ box1.hide(); }else if(box1.is(":hidden")){ box1.show(); } event.stopPropagation();//阻止冒泡调用$(document).click }).blur(function(event){//用户离开输入框，如果用户点击了某个车型 $(".box1 ul li").click(function(){//通过冒泡调用了$(document).click $(current_target).val($(this).html()); }); }); //车辆车系-点击快速找车的输入框 $("#model2").click(function(event){ clickBlank(2); box2.css({top:($(this).offset().top+30),left:($(this).offset().left)}); current_target = event.target; if(box2.is(":visible")){ box2.hide(); }else if(box2.is(":hidden")){ box2.show(); } event.stopPropagation();//阻止冒泡调用$(document).click }).blur(function(event){//用户离开输入框，如果用户点击了某个车型 $(".box2 ul li").click(function(){//通过冒泡调用了$(document).click $(current_target).val($(this).html()); }); }); //点击右上角关闭按钮 $(".close").on('click',function(){ $(".grey").hide(); $(this).closest("#dialogContainer").html(''); }); })
浙公网安备 33010602011771号