基于jQuery的弹出隐藏层的窗口特效

运行效果后，点击菜单，会弹出一个注册表单，类似于很多论坛的用户注册及登录功能那样，目前还是挺流行的。

弹出层

$(document).ready(function(){
$("#button_2").click(function(){
$("#message").hide();
});

$("#message_show").click(function(){
$("#message").show();
});

$("#message_show2").click(function(){
$("#message").show();
});

$("#message_show3").click(function(){
$("#message").show();
});

$("#message_show4").click(function(){
$("#message").show();
});

$("#message_show5").click(function(){
$("#message").show();
});

$("#message_show6").click(function(){
$("#message").show();
});

$("#message_show7").click(function(){
$("#message").show();
});

$("#message_show8").click(function(){
$("#message").show();
});

$("#message_show9").click(function(){
$("#message").show();
});

});

.pro_list {
width:720px;
margin:0 auto;
}
.menu {
width:700px;
height:30x;
padding-top:15px;
clear:both;
}
.message_box {
width:550px;
border:5px solid #bd0404;
background:#fef8f6;
position:absolute;
margin:0 auto;
left: 498px;
top: 200px;
display:none;
}
.message_box {
width:550px;
border:5px solid #bd0404;
background:#fef8f6;
position:absolute;
margin:0 auto;
left: 498px;
top: 200px;
display:none;
}
.message_box .mess_input {
width:200px;
border:1px solid #ccc;
height:20px;
caption-side:inherit;
}
.ly_td-bg {
border-bottom:#f8d1cf dashed 1px;
width:180px;
padding-right:10px;
}
.dd {
width:200px;
height:161px;
border:1px solid #ccc;
}
.bb span {
color:#855409;
font-size:14px;
margin-left:10px;
}
.mess_show {
float:right;
margin-right:5px;
}

  姓名： * 您的真实姓名
  电话： * 请填写您的电话号码
  地址： * 请填写您的地址,以保证资料邮递
  邮箱： * 请填写电子邮箱
 
内容

填写留言或选择快捷留言
现在就想加入，请给我预留名额。
对这个项目很感兴趣，尽快寄资料
请问我这个地方有加入者了吗？






















填写留言或选择快捷留言
我想加入，请来电话告诉具体细节
想找一个合适的项目做，请来电话
有兴趣开店，请寄资料或打电话。






















填写留言或选择快捷留言
详细研究过您们的项目，想加入。
加入你们后，还会提供哪些服务？
想去你们公司考察，请给我来电话

     

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • jQuery+jqmodal弹出窗口实现代码分明

    jQuery+jqmodal弹出窗口实现代码分明

    先上图,最终效果如下 点击"信息确认" 就是弹出一个确认窗口,把已经填报的信息都放到里面看看. 信息放里面很简答,主要是弹出窗口要做得好看点. 所以选择了jQuery+jqmodal实现 实现方法如下1.页面中引用jquery-1.4.2.js和jqModal.js,注意jQuery要在前面,因为jqmodal是以jQuery为基础的. 2.建立jqModal.css,并引用,主要是些美工的东东,注意div.jqmDialog 的 display为 none.高度和宽度要设置好,挡住下

  • 基于jquery的弹出提示框始终处于窗口的居中位置（类似于alert弹出框的效果）

    原理很简单: 获取当前屏幕(窗体)的宽度和高度,因为不同浏览器的窗体大小是不一样的.有了这个,可以计算出来垂直居中的坐标.但是滑动了滚动条怎么依然垂直居中呢?这个时候就要获取当前窗体距离页面顶部的高度,加到刚刚的y轴坐标即可. $(document)是获取整个网页的,$(window)是获取当前窗体的,这个要搞清楚. 最后把获取的坐标赋给窗体即可,窗体本身是绝对定位的,所以自然可以到窗体中间. 具体代码: 复制代码 代码如下: <!DOCTYPE HTML> <html> <

  • jquery实现弹出窗口效果的实例代码

    JavaScript实现弹出窗口实质上就是在浏览器上画了一个方形区域,并在开始时将其隐藏,只是到某个JavaScript事件时才通过修改css的属性值来将其显示出来. 其大致步骤为: •创建一个装载弹出窗口的div 复制代码 代码如下: <html>  <head>    <title>jQuery实例1:浮动窗口</title>    <meta http-equiv="Content-Type" content="te

  • jQuery实现弹出窗口中切换登录与注册表单

    jQuery实现弹出窗口中切换登录与注册表单

    当点击页面中的登录或注册按钮时,将会弹出一个模态窗口,就是一个弹出层,我们可以在弹出层上轻松的切换登录与注册表单,极大的方便用户,不需要关闭层再去点击转向其他操作,在很多网站上已经广泛应用. 本文结合实例,通过使用jQuery以及CSS3和HTML5技术实现这一效果. HTML 我们现在主页面上设置两个链接按钮,即登录和注册按钮. <nav class="main_nav"> <ul> <li><a class="cd-signin&

  • jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法

    jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法

    本文实例讲述了jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法.分享给大家供大家参考,具体如下: 一.先描述下可以实现什么: 下拉框一改变,弹出框出现,选择弹出框中的值会赋值给下拉菜单 二.代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Subscribe策略</ti

  • jquery 弹出登录窗口实现代码

    jquery 弹出登录窗口实现代码

    主要层左右居中,设置left等于窗口宽除二减去自身层宽除二就居中了,至于窗口上下居中我没做到,固定了top等于滚动条隐去的 scrollTop加上50px; 当事件触发这个类时,首先判断一下两个层是否已经append到body里面,否则每次触发它就一直增加增加了.设置了五个参数title. content.width.height.cssName,它们分别定义了层标题.层内内容.层宽.层高.层内容的样式名.层内内容又设置了url. text.id.iframe四种加载方式,通过ajax以get或

  • AeroWindow 基于JQuery的弹出窗口插件

    AeroWindow 基于JQuery的弹出窗口插件

    可以一个页面中创建多个弹出窗,被选中的弹出窗会加亮显示,在同一网页中可以有多个弹出窗口,也可以通过双击窗口实现最大化,跟windows像极了.如果想要做一个类似操作系统的页面,用这个插件是完全可以实现的.兼容多种主流浏览器. 最基础的调用方法: 复制代码 代码如下: $('#YourContainerDiv').AeroWindow((WindowTitle:'hello world',)); 带全部参数的调用: 复制代码 代码如下: $('#YourContainerDiv').AeroWin

  • jQuery实现的模拟弹出窗口功能示例

    本文实例讲述了jQuery实现的模拟弹出窗口功能.分享给大家供大家参考,具体如下: //初始化文档 $(document).ready(); //----------------弹出DIV仿模态窗口开始---------------- var divW; //DIV宽度 var divH; //DIV高度 var clientH; //浏览器高度 var clientW; //浏览器宽度 var divTitle; //DIV标题 var pageUrl; //DIV中加载的页面 var div

  • jQuery弹出层始终垂直居中相对于屏幕或当前窗口

    弹出层永远是一个前端必须搞定的东西,一般情况下,如果弹出层有固定的高和宽,用样式即可搞定,但是如果碰到没有固定高或者固定宽或者固定高和宽的时候,我们就需要用JS去处理,去动态获取当前窗口高或者宽:今天弄了2种情况,一个是相对于屏幕窗体,一个是相对于当前的窗口,看代码,或许对你有用: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

  • jQuery弹出窗口完整代码(居中,居左,居右)

    jQuery弹出窗口完整代码(居中,居左,居右)

    核心代码: 复制代码 代码如下: //获取窗口的高度 var windowHeight; //获取窗口的宽度 var windowWidth; //获取弹窗的宽度 var popWidth; //获取弹窗高度 var popHeight; function init(){ windowHeight=$(window).height(); windowWidth=$(window).width(); popHeight=$(".window").height(); popWidth=$(

  • Jquery弹出窗口插件 LeanModal的使用方法

    Jquery弹出窗口插件 LeanModal的使用方法

    开发网站少不了要经常用弹出窗口的形式,今天在网上搜了个小插件LeanModal,记录于此,方便自己,亦方便他人使用. 此插件是个老外写的,体积小是它最大的优点,压缩后1k不到.当然,此插件是寄生于JQuery上. 一. 效果图 二.使用步骤: 1.引用Jquery.js和leanModal.min.js 复制代码 代码如下: <script src="Javascript/jquery-1.4.1.min.js" type="text/javascript"&

随机推荐