jQuery Custom PopUp Window
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Demo for jQuery Custom PopUp Window</title>
<style type="text/css">
/*Geovin Du: Style you custom popupbox according to your requirement */
.popupbox {
width:500px;
height:300px;
background-image:url(images/pop-up_03.png);
background-repeat:no-repeat;
display: none; /* Hidden as default */
float: left;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
}
.popupbox2 {
width:454px;
height:307px;
background-image:url(images/pu_03.png);
background-repeat:no-repeat;
display: none;
float: left;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
}
.popupbox3 {
width:502px;
height:302px;
background-image:url(images/3_03.png);
background-repeat:no-repeat;
display: none;
float: left;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
}
#fade {
display: none; /* Hidden as default */
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
#intabdiv {
text-align:center;
}
#intabdiv {
padding:30px 30px 30px 30px;
} #intabdiv2 {
padding:70px;
}
#intabdiv2 h2 {
font-size:24px;
color:#696868;
font-family:Verdana, Geneva, sans-serif;
}
#intabdiv2 p {
font-size:12px;
color:#696868;
font-family:Verdana, Geneva, sans-serif;
line-height:20px;
} #intabdiv3 {
padding:70px;
}
#intabdiv3 h2 {
font-size:24px;
color:#fff;
font-family:Verdana, Geneva, sans-serif;
}
#intabdiv3 p {
font-size:12px;
color:#fff;
font-family:Verdana, Geneva, sans-serif;
line-height:20px;
}
#closeThis
{
margin-right:0px;
float:right;
padding-right:10px;
padding-top:5px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
//http://www.htmldrive.net/categorys/show/12/Lightbox-Dialog-Overlay
$(document).ready(function() { // Here we will write a function when link click under class popup
$('a.popup').click(function() { // Here we will describe a variable popupid which gets the
// rel attribute from the clicked link
var popupid = $(this).attr('rel'); // Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$('#' + popupid).fadeIn(); // append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); // Now here we need to have our popup box in center of
// webpage when its fadein. so we add 10px to height and width
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2; // Then using .css function style our popup box for center allignment
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
}); // Now define one more function which is used to fadeout the
// fade layer and popup window as soon as we click on fade layer
//關閉層，塗聚文修改 20130813
$("div a.closeThis").click(function(){
$(this).parent().hide();
$('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut()
return false;
}); $('#fade').click(function() {
// Add markup ids of all custom popup box here
$('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut()
return false;
});
});
</script>
<script type="text/javascript"> $(document).ready( function(){}); function hiden(){ $("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast } function slideToggle(){ $("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上 } function show(){ $("#divObj").show();//显示,参数说明同上 } function toggle(){ $("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上 } function slide(){ $("#divObj").slideDown();//窗帘效果展开 } </script>
</head> <body> <h3>div里内容的显示隐藏特效</h3> <input type="button" value="隐藏" onclick="hiden()"/>
<input type="button" value="显示" onclick="show()"/>
<input type="button" value="窗帘效果显示2" onclick="slide()"/>
<input type="button" value="窗帘效果的切换" onclick="slideToggle()"/>
<input type="button" value="隐藏显示效果切换" onclick="toggle()"/> <div id="divObj" style="display:none">
1.测试例子<br/>
2.测试例子<br/>
3.测试例子<br/>
4.测试例子<br/>
5.测试例子<br/>
6.测试例子<br/>
7.测试例子<br/>
8.测试例子<br/>
9.测试例子<br/>
0.测试例子<br/>
</div> <h1><a href="#" rel="popuprel" class="popup">Click Here for 1st Custom Modal Window</a></h1>
<h1><a href="#" rel="popuprel2" class="popup">Click Here for 2nd Custom Modal Window</a></h1>
<h1><a href="#" rel="popuprel3" class="popup">Click Here for 3rd Custom Modal Window</a></h1> <div class="popupbox" id="popuprel"><a href="#" class="closeThis" id="closeThis"><img src="data:images/close_pop.png" alt=""/></a>
<div id="intabdiv">
<h2>天下為公 </h2>
<p> why we only heard about haves and have-nots,why we didn't heard about doers and doer-nots.人生是一种心境,生活是一种艺术,成功是一种心态,幸福是一种感觉,竞争是一种建构,情感是一种整合.学习是一种成长.逻辑和美都关注封闭的事实,我们的生活则是发现的经验中度过的.....$经一番挫折,长一番识见.容一番横逆,增一番器度.省一番经营,多一分道义.学一分退让,讨一分便宜.去一分奢侈,少一分罪过.加一分体贴,知一分物情</p> </div> </div> <div class="popupbox2" id="popuprel2"><a href="#" class="closeThis" id="closeThis"><img src="data:images/close_pop.png" alt=""/></a>
<div id="intabdiv2">
<h2>塗聚文</h2>
<p> 哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构(分析)整合学习, 情商(EQ)运筹(学)成功,信息流,物流,人力资源流,资本流的系统解决方案的开发与设计.</p> </div> </div> <div class="popupbox3" id="popuprel3"><a href="#" class="closeThis" id="closeThis"><img src="data:images/close_pop.png" alt=""/></a>
<div id="intabdiv3">
<h2>捷為工作室</h2>
<p>￡捡垃圾,就是我的一生渴求. ￡并且喜欢这句"书中自有黄金屋,书中自有颜如玉,书中自有千钟黍,书中车马多簇簇"的感慨."读书长见识,行路广阅历",是一个"悟"字. ＄自然是我最想追求的"偶像". ￥读者是,读之者,者之读.一沙一世界! ￥to be is to do举世皆清我独浊,众人皆醒我独醉</p> </div>
</div> <div id="fade"></div>
</body> </html>
jQuery Custom PopUp Window的更多相关文章
- Error when clicking other button after displaying Popup window(转)
原文地址:Error when clicking other button after displaying Popup window Hi, I'm developing a custom page ...
- jQuery Ready 与 Window onload 的区别(转)
“我们都知道,很多时候,在页面加载完后都需要做一些相应的初始化动作.例如,运行某些js特效,设置表单等等.怎么知道页面加载完了呢?一 般情况下都是设置body标签的onload监听window的loa ...
- 在指定控件位置弹出popup window
先看效果图 黄色的就是弹出的popup window 首先自定义一个view用来显示,文件名为layout_my_view.xml <?xml version="1.0" e ...
- Pass value from child popup window to parent page window using JavaScript--reference
Here Mudassar Ahmed Khan has explained how to pass value from child popup window to parent page wind ...
- 设计Popup Window
设计一个Popup window, 在其中实现分享到Facebook 和Twitter 功能. popup window 名称为 ShareView.xaml, 代码如下: <phone:Pho ...
- 第二百零三节，jQuery EasyUI，Window(窗口)组件
jQuery EasyUI,Window(窗口)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Window(窗口)组件的使用方法,这个组件 ...
- Add an Action that Displays a Pop-up Window 添加显示弹出窗口按钮
In this lesson, you will learn how to create an Action that shows a pop-up window. This type of Acti ...
- jquery自定义插件——window的实现
本例子实现弹窗的效果: 1.jquery.show.js /* * 开发者:lzugis * 开发时间:2014年6月10日 * 实现功能:点击在鼠标位置显示div * 版本序号:1.0 */ (fu ...
- Jquery Offset, Document, Window 都是什么
From http://www.cnblogs.com/luhe/archive/2012/11/14/2769263.html JQuery Offset实验与应用 我们有时候需要实现这样一种功 ...
随机推荐
- Sample-Code:Bing Search API
Demo link: http://code.msdn.microsoft.com/windowsazure/How-to-use-bing-search-API-4c8b287e Aspx Code ...
- dsp之BF531笔记
获得更多资料欢迎进入我的网站或者 csdn或者博客园 很久以前的BF531的笔记,觉得有用分享出来.摘自于open dsp 通用Gpio ADSP-BF53x 处理器上有16 个PF 接口,这些接口就 ...
- 并查集简述 (HDU-1213-How Many Tables)
并查集主要解决集合的有关运算,主要操作是查找操作和并操作. 1.集合的储存方式. 为便于查找,集合通常以树结构储存,每个元素分 数据域和指针域,可以用链式储存,也可以用结构数组储存,用根节点来表示一个 ...
- 【离散数学】 SDUT OJ 传递闭包 && memset 使用注意事项
传递闭包 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 已知有n头牛,m次战斗关系, ...
- 条目六《当心C++编译器中最烦人的分析机制》
当心C++编译器中最烦人的分析机制 C++是较为底层的面相对象语言,在底层的语法规则分析中,有很多隐藏的分析机制. C++中的普遍规律相符,即尽可能地解释为函数声明. 把形式参数的声明用括号括起来是非 ...
- [DEBUG]-[org.mybatis.spring.SqlSessionFactoryBean.buildSqlSessionFactory(SqlSessionFactoryBean.java:431)] 一直在创建sqlsession工厂原因
今天在做开发项目的时候出现一直在控台输出创建sqlsessionfactory'这个代码, tomcat一直在控制台上输出这个内容无法停止下来,那么到底是什么原因呢, 我们可以在输出信息上看到有个wa ...
- class __init__()
python 先定义函数才能调用 类是客观对象在人脑中的主观映射,生产对象的模板,类相当于盖房的图纸,生产工具的模具 模板 类:属性.方法 __init__() 这个方法一般用于初始化一个类但是 当实 ...
- [BZOJ 1489][HNOI2009]双递增序
传送门 满满的负罪感,昨晚的刷题历程:写几道难题吧-->算了,还是只切道水题吧-->RNG赢了...... 背包一下就行了 #include <bits/stdc++.h> u ...
- Valgrind 检测程序内存使用
Valgrind是用于构建动态分析工具的探测框架.它包括一个工具集,每个工具执行某种类型的调试.分析或类似的任务,以帮助完善你的程序.Valgrind的架构是模块化的,所以可以容易地创建新的工具而又不 ...
- git push的一些坑
在安装git的时候我们一般会自己设置一个用户名和邮箱,这个一般设置为全局的用户名,如下所示 git config --global user.name "xxx" git conf ...