您现在的位置:计算机技术学习网 > 技术中心 > WEB编程 > JSP >

js遮罩弹出层

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-02 01:23 点击:

1、链接单机事件

<a id="qqhm_open1" onclick=$("#qqhmsz_tb").show();$(this).hide();

单击出发事件,然后隐藏自己。

2、遮罩弹出层的应用(这是一个jsp完整代码)

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>可移动的弹出框</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">   

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<style type="text/css">

<!--

* {

padding:0;

margin:0;

}

#upcontent {

list-style-position: outside;

list-style-image: none;

list-style-type: none;

}

#upcontent li {

font-size:12px;

color:#333;

line-height:150%;

}

#bodyL {

float:left;

width:84px;

margin-right:2px;

}

#tittleup {

font-size:14px;

font-weight:bold;

color:#000066;

padding-left:25px;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #d0daec;

margin-bottom: 10px;

padding-bottom: 10px;

}

a.od {

float:right;

font-size:14px;

color: #CC0000;

text-decoration: none;

}

a.od:hover {

color:#FF0000;

}

#fd {

background:#EDF1F8;

border: 2px solid #849BCA;

margin-top:2px;

margin-left:2px;

float:left;

overflow:hidden;

position:absolute;

left:380px;

top:200px;

cursor:move;

float:left;/*filter:alpha(opacity=50);*/

z-index: 10;

}

.contentup

{

padding:20px;

}

}

-->

</style>

  </head>

  <body>

    <a href="http://hi.baidu.com/521_yangyang/home" target="_blank">我的百度空间:"爱上小桥流水"</a>

<br/>

<div id="bodyL"> <a href="#" onclick = "show('fd',event);return false;"> [打开层] </a> </div>

<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">

  <div class="contentup"> <a href="#" class="od" onclick = "closeed('fd');return false;"> 关 闭</a>

    <div id="tittleup">小小的程序员</div>

    <ul id="upcontent">

      <li><span style='font-weight: bold; color:red;'>章鱼哥:</span> 你是做什么的呢? 是做销售代表、还是做软件开发呀</li>

      <li><span style='font-weight: bold; color:green;'><span style='font-weight: bold; color:green;'>海绵宝宝:</span></span>做软件开发的,累着、乐着、还活着!你可有好的工作介绍下呢。</li>

      <li><s

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      用户名: 验证码:点击我更换图片
      最新评论 更多>>

      推荐热点

      • JSP与Servlet
      • 自己动手写MiniBBS系列(基本篇)之用户登录
      • JSP取当前日期
      • JDBC 入门(一)
      • 打开一个jsp页面默认查询所有数据,调用action
      • 使用JSP标签库验证用户的输入(2)完
      • WIN98/2000下的jsp服务器
      • 自定义JSP标签(tag)浅议
      • Struts学习傻瓜式入门篇
      网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
      Copyright © 2008-2015 计算机技术学习交流网. 版权所有

      豫ICP备11007008号-1