- 浏览: 716902 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
liuweihug:
.net的请参考:Jquery+asp.net 后台数据传到前 ...
jquery ajax POST 例子详解 -
topbox163:
LZ,有LINUX 64位的WEBLOGIC没?
WebLogic11g|Oracle WebLogic Server 11gR1|下载
jquery ui dialog|popup 弹出窗口层
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: http://www.cnblogs.com/wangdetian168
//@email: wangdetian168@163.com
/***************************/
document.write('<div id="backgroundPopup"></div> <div id="popupContact" style="display:none;position:fixed;_position:absolute;height:384px;width:408px;background:#FFFFFF;border:2px solid #cecece;z-index:2;padding:12px;font-size:13px;"> <a id="popupContactClose">x</a><h1 id="idModalTitle" align="right"></h1><p id="idContentArea"></p></div>');
document.write("<link rel='stylesheet' type='text/css' href='general.css'>");
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
var idCloses=new Array("popupContactClose","buttonClose");
var popupModal='{idLoadHtml:"popupContact1",idModalTitle:"弹出窗口测试",isUseTitle:true,align:"center",modalWidth:"408px";modalHeight:"384px",show:function(){ centerPopup();//load popup loadPopup();}}';
//popupModal={idLoadHtml:"popupContact1",idModalTitle:"弹出窗口测试",isUseTitle:true};
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
//弹出层
popupModal.show=function(e)
{
centerPopup();
//load popup
loadPopup();
}
//是否显示标题
if(popupModal.isUseTitle){
$("#idModalTitle").html(popupModal.idModalTitle);
//alert($("#idModalTitle").attr("align"));
$("#idModalTitle").attr("align",popupModal.align);
//alert(popupModal.align);alert($("#idModalTitle").attr("align"));
}
else{
$("#idModalTitle").hide();
}
//设置窗口大小
document.getElementById("popupContact").style.width=popupModal.modalWidth;
document.getElementById("popupContact").style.height=popupModal.modalHeight;
$("#idContentArea").html(document.getElementById(popupModal.idLoadHtml).innerHTML);
//LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
for(var i=0;i<idCloses.length;i++)
{
$("#"+idCloses[i]).click(function(){
disablePopup();
});
}
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
genneral.css
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
font-family:Tahoma,arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
}
#popupContact h1{
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:6px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}
测试页面
<!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" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jquery教程演示:JavaScript弹出窗口DIV层效果代码--代码吾爱 </title>
<script type="text/javascript" src="../ui-images/js/jquery-1.4.2.min.js"></script>
<script src="popup.js" type="text/javascript"></script>
<script type="text/javascript">
idCloses.push("idput");
popupModal={idLoadHtml:"popupContact1",idModalTitle:"弹出窗口测试",isUseTitle:true,align:"center",modalWidth:"800px",modalHeight:"300px"};
</script>
</head>
<body>
<center>
<p><img/ src="logo.gif" alt="点击进入代码吾爱"/></p>
<p><img/ src="banner.bmp" alt="点击进入代码吾爱"/></p>
<div id=""><input type="button" onclick="popupModal.show()" value="点击这里查看效果" /></div>
<p></p>
<p>教程:JS弹出窗口DIV层效果代码 </a></p>
</center>
<div id="popupContact1" style="display:none">
<p id="contactAreasss">
这就是我们创建的漂亮DIV弹窗效果。可以看到jQuery实在是非常强大,我们仅需少量的CSS和JavaScript代码即可完成这一效果。<br/><br/>
我们可以在这个弹窗之中放置一个登录框、注册表单、重要事件提醒等等。
<br/><br/>
要关闭这个窗口,请点击右上方的X按钮或点击弹窗外的背景或按下键盘上的ESC键。
<input type="button" id="buttonClose" value="关闭" />
</p>
</div>
</body>
</html>
发表评论
-
js日期控件
2010-11-27 22:37 839<script language="javas ... -
web打印控件|打印预览
2010-10-30 17:18 745web打印控件|打印预览 http://files.cnblo ... -
jquery 获取radio 选中的值
2010-09-16 10:48 732var val = $("input[@n ... -
showModalDialog参数详解|使用方法
2010-09-17 11:40 872基本介绍: showModalDialog ... -
fck editor 编辑器例子下载|配置说明
2010-09-26 11:26 651将例子里的fck文件夹考到你的站点目录里 然后将web.con ... -
jquery控件|jquery ui 控件 例子 含 message|window |dialog
2010-09-26 11:40 821jquery的优秀的控件库 包括常用 messager dia ... -
省市区联动控件
2010-09-27 14:25 681<input type="text" ... -
让iframe 100%填充页面代码|100% height|100% width
2010-08-23 10:09 1696让iframe 100%填充页面代码 要想让iframe 高1 ... -
判断html修改日期
2010-08-18 23:23 718<script type="text/java ... -
js 跨域访问 找了好长时间
2010-07-26 23:07 793一直没时间玩js,看到douban网的开放api后,查了些文档 ... -
跨域访问 js 使用json script 跨域访问
2010-07-27 11:19 916代码 <!--<br/ />< ... -
“Internet Explorer无法打开站点,已终止操作”解决
2010-03-31 14:47 2591“Internet Explorer无法打开站点,已终止操作” ... -
jquery ajax POST 例子详解
2010-04-08 10:28 1352function test(){ $.ajax({ ... -
js判断间隔时间
2009-07-23 12:17 1020function timer(){var l = (new D ... -
ajax|消息提示框|js获取html绝对位置 封装
2009-10-28 16:03 1285function Ajax( ... -
google suggest 代码例子
2009-11-02 16:43 756js封装代码 ... -
移动上去换样式代码
2009-11-17 13:42 607<style>.op_m { BORDER-RIG ... -
js解析xml文件
2010-02-04 17:05 657function initTreeNode(dtree) ... -
左右移动的js分割面板
2010-02-26 10:04 847<!DOCTYPE html PUBLIC " ...
相关推荐
通用jQuery对话框dialog或popup弹出层或提示窗口插件
Jquery UI dialog 详解 (弹出层) 包含jquery弹出层的详细介绍,以及代码用例
jQuery通用dialog对话框 popup提示信息窗口插件demo
jQuery 通用dialog/popup弹出层,提示窗口插件,包括有弹出自定义的帮助窗口(根据位置自动判断在底部或头部弹出)、显示和隐藏Loading信息、显示自定义Loading信息、在指定容器内显示Loading信息、显示和隐藏Tip信息...
jquery弹出效果实例,展示了jquery对弹出窗口的多个实例,弹出窗口框,弹出框内弹出页面,
两个版本:一个替换ui close按钮,对三个按钮设立同样css;一个不替换,修改ui的css文件;完美打开多个对话框,并可以分别控制最大最小关闭。jquery文件没有包含进来。
内容索引:脚本资源,jQuery,提示框,弹出层 jQuery 通用dialog/popup弹出层,提示窗口插件,包括有弹出自定义的帮助窗口(根据位置自动判断在底部或头部弹出)、显示和隐藏Loading信息、显示自定义Loading信息、在...
jQuery通用dialog/popup窗口插件 •帮助窗口(根据位置自动判断在底下弹出) •帮助窗口(根据位置自动判断在头部弹出) •显示Loading信息(默认) 隐藏Loading信息 •显示自定义Loading信息(默认) 隐藏Loading...
NULL 博文链接:https://taotie119.iteye.com/blog/2075536
JQuery UI 的对话框的一些属性的用法
添加按钮弹出层jqueryui实现,dialog
基于 jquery 项目中 用到的dialog弹出层 一种弹出层
jQuery UI dialog 的使用 准备 jQuery 环境 首先,我们创建一个按钮,点击这个按钮的时候,将会弹出一个对话框。 详情内容可以参考文档
jQuery UI dialog IE6下处理select框被遮挡jquery.bgiframe.js
NULL 博文链接:https://wufan0023.iteye.com/blog/1446334
jQuery对话框Dialog弹出层插件演示与使用说明
jQuery dialog对话框插件点击弹出对话框代码 jQuery dialog对话框插件点击弹出对话框代码
里面是经过修改的jquery.ui.dialog.js(版本jQuery UI Dialog 1.8.12),添加了parentElement: 'body',详情查看http://forum.jquery.com/topic/dialog-will-move-its-div-tag-to-body
dialog就是我们常说的弹出层,应用还是比较广泛的,比如:可以使用弹出层做登录、注册和消息提示等功能 下面来详细说说dialog的使用方法 ………… ……………… ………………………… ……………………………………
jquery.dialog.js 是jquery 最经典的弹出框插件,简单易用,亲测可用,附案例代码