CSS+jQuery实现弹出框代码

来源：互联网发布：mac能玩游戏编辑：程序博客网时间：2024/04/29 01:33

今天写着玩练手的，简单的实现点击按钮弹出新的窗体。

页面：

点击后弹出窗口效果：

首先贴出CSS代码：

#button {margin:200px auto;padding:20px 20px;background:orange;width:200px;text-align:center;border-radius:5px;cursor:pointer;-webkit-box-shadow: 0 4px 0 #bcbcbc;box-shadow: 0 4px 0 #bcbcbc;}#zhedang {z-index:9998;position:fixed;top:0;left:0;width:100%;height:100%;background: #bcbcbc;opacity: 0.4; filter: alpha(opacity = 40); display:none;}#tanchu {z-index:9999;position:absolute;top:30%;left:35%;width:500px;height:350px;background:#bcbcbc;display:none;}#tanchu h2 {background:#364f86;position:relative;font-size:14px;height:25px;margin:0;line-height:25px;}#tanchu h2 a {position:absolute;right:5px;text-decoration:none;color:#fff;font-size:20px;}#tanchu p {padding:0 10px;}

主体有三个部分，一部分是橙色按钮（#button），是触发弹出框的装置，第二部分是遮挡层（#zhedang），就是灰蒙蒙的特效，第三部分就是弹出框（#tanchu）。注意我们用z-index来表示层叠元素的优先级，数值越大，显示的优先级越高，就能实现遮挡的效果了。还有，遮挡层opacity调整透明度。

接下来就是jQuery代码了，也是比较基础的：

$(document).ready(function(){  $("#button").click(function(){    $("#zhedang").fadeIn(100);    $("#tanchu").slideDown(200);  });  $(".close").click(function(){    $("#zhedang").fadeOut(100);    $("#tanchu").slideUp(200);  });  $("#zhedang").click(function(){    $("#zhedang").fadeOut(100);    $("#tanchu").slideUp(200);  });});

就是捕捉一些点击的行为，然后对各个层进行操作。因为简单，所以动画效果不好，但基本实现了所需功能。

完整代码，你可以将CSS另外新建一个文件，这里不再赘述：

<%@ page language="java" import="java.util.*"contentType="text/html; charset=GBK"%><!DOCTYPE html><!--[if IE 8]> <html lang="en" class="ie8"> <![endif]--><!--[if !IE]><!--> <html lang="en"> <!--<![endif]--><head><meta charset="utf-8"><title>CSS+jQuery实现弹出层代码</title><script  src="js/jquery.js"></script><style>#button {margin:200px auto;padding:20px 20px;background:orange;width:200px;text-align:center;border-radius:5px;cursor:pointer;-webkit-box-shadow: 0 4px 0 #bcbcbc;box-shadow: 0 4px 0 #bcbcbc;}#zhedang {z-index:9998;position:fixed;top:0;left:0;width:100%;height:100%;background: #bcbcbc;opacity: 0.4; filter: alpha(opacity = 40); display:none;}#tanchu {z-index:9999;position:absolute;top:30%;left:35%;width:500px;height:350px;background:#bcbcbc;display:none;}#tanchu h2 {background:#364f86;position:relative;font-size:14px;height:25px;margin:0;line-height:25px;}#tanchu h2 a {position:absolute;right:5px;text-decoration:none;color:#fff;font-size:20px;}#tanchu p {padding:0 10px;}</style></head><body><div id="button">点击弹出窗口</div><div id="zhedang"></div><div id="tanchu"><h2>标题<a class="close" href="#">X</a></h2><p>这里写弹出层的一些内容，包括文字，输入框等。</p></div><script>$(document).ready(function(){  $("#button").click(function(){    $("#zhedang").fadeIn(100);    $("#tanchu").slideDown(200);  });  $(".close").click(function(){    $("#zhedang").fadeOut(100);    $("#tanchu").slideUp(200);  });  $("#zhedang").click(function(){    $("#zhedang").fadeOut(100);    $("#tanchu").slideUp(200);  });});</script></body></html>

如果你觉得特效太挫，那么可以用一些动画来展示弹出框（效果可以自己试试，且更换了遮挡层的另一种出现消失效果代码，利用css实现）：

$(document).ready(function(){var box =300;var th= $(window).scrollTop()+$(window).height()/1.6-box;var rw =$(window).width()/2-box;  $("#button").click(function(){    $("#zhedang").css("display","block");    $("#tanchu").animate({top:th,opacity:'show',width:600,height:340,right:rw},500);  });  $(".close").click(function(){    $("#zhedang").css("display","none");    $("#tanchu").animate({top:0,opacity: 'hide',width:0,height:0,right:0},500);  });  $("#zhedang").click(function(){    $("#zhedang").css("display","none");    $("#tanchu").animate({top:0,opacity: 'hide',width:0,height:0,right:0},500);  });});

而为了配合动画效果，弹出层css则要去掉top和left的限定，修改为：

#tanchu {z-index:9999;position:absolute;width:500px;height:350px;background:#bcbcbc;display:none;}

这个效果就好多了！

0 0