jQuery Custom PopUp Window

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

<!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="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="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="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>

posted @ 2013-08-13 12:49 ®Geovin Du Dream Park™ 阅读(530) 评论(0) 编辑收藏举报

®Geovin Du Dream Park™

why we only heard about haves and have-nots, but we did'nt heard about doers and doer-nots. 人生是一种心境,生活是一种艺术,成功是一种心态,幸福是一种感觉,竞争是一种建构,情感是一种容合.学习是一种成长.

jQuery Custom PopUp Window

公告

搜索

常用链接

我的标签

积分与排名

随笔分类

随笔档案

文章分类

相册

捷为工作室

阅读排行榜

评论排行榜

推荐排行榜

最新评论