JQUERY弹出模式DIV

来源：互联网发布：连接阿里云服务器编辑：程序博客网时间：2024/06/07 03:03

弹出DIV是采用JQUERY+CSS联合控制的，JQUERY弹出窗口，CSS控制层的显示和效果

页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!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"><script type="text/javascript" src="script/jquery-1.8.3.js"></script><script type="text/javascript" src="script/pop.js"></script><link type='text/css' rel='Stylesheet' href='style/pop.css' /><title>Insert title here</title></head><body><div id='pop-div' style="width: 300px" class="pop-box"><h4 class="pop-boxh4">标题位置</h4><div class="pop-box-body"><p>弹出内容</p></div><div id='buttonPanel' style="text-align: right"style="text-align:right"><input type="button" value="Close" id="btn1"onclick="hideDiv('pop-div');" /></div></div><input type="button" value="选择" onclick="popupDiv('pop-div')"style="cursor: pointer;"></body></html>

JS代码

function popupDiv(div_id) {// 获取传入的DIVvar $div_obj = $("#" + div_id);// 计算机屏幕高度var windowWidth = $(window).width();// 计算机屏幕长度var windowHeight = $(window).height();// 取得传入DIV的高度var popupHeight = $div_obj.height();// 取得传入DIV的长度var popupWidth = $div_obj.width();// // 添加并显示遮罩层$("<div id='bg'></div>").width(windowWidth * 0.99).height(windowHeight * 0.99).click(function() {hideDiv(div_id);}).appendTo("body").fadeIn(200);// 显示弹出的DIV$div_obj.css({"position" : "absloute"}).animate({left : windowWidth / 2 - popupWidth / 2,top : windowHeight / 2 - popupHeight / 2,opacity : "show"}, "slow");}/*隐藏弹出DIV*/function hideDiv(div_id) {$("#bg").remove();$("#" + div_id).animate({left : 0,top : 0,opacity : "hide"}, "slow");}

CSS代码

@CHARSET "UTF-8";.pop-box-body {clear: both;margin: 4px;padding: 2px;}.pop-boxh4{  color:#FFF;  cursor:default;  height:18px;  font-size:14px;  font-weight:bold;  text-align:left;  padding-left:8px;  padding-top:4px;  padding-bottom:2px;  background:blue;}.pop-box {/*弹出窗口后，弹出的DIV采用此CSS，保证置于最上层  z-index控制Z轴的坐标，数值越大，离用户越近*/z-index: 9999999; /*这个数值要足够大，才能够显示在最上层*/margin-bottom: 3px;display: none;position: absolute;background: gray;border: solid1px #6e8bde;}#bg {width: 100%;height: 100%;position: absolute;top: 0;left: 0;/*弹出窗口后，添加遮罩层，采用此CSS，将该层置于弹出DIV和页面层之间  z-index控制Z轴的坐标，数值越大，离用户越近*/z-index: 5;  background: white;}

工程代码：http://download.csdn.net/detail/shanhuhau/5245136